How fetch array value in nested ngFor?

Question

Error:AppComponent.html:16 ERROR TypeError: Cannot read property 'controls' of undefined at Object.eval [as updateDirectives] (AppComponent.html:16)

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  signupForm: FormGroup;
  arr;
  ngOnInit() {

    this.arr = ["id", "name", "weight", "quantity"];

    this.signupForm = new FormGroup({
      'id': new FormArray([new FormControl('1'), new FormControl('2')]),
      'name': new FormArray([new FormControl('Beans'), new FormControl('Soup')]),
      'weight': new FormArray([new FormControl('100'), new FormControl('125')]),
      'quantity': new FormArray([new FormControl('60'), new FormControl('20')])
    });
    console.log(this.arr[0]);
  }
}

app.component.html

<div class="container">
  <div class="row">
    <form [formGroup]="signupForm">
      <div class="form-group">
        <table class="table">
          <thead>
            <tr>
              <td>S.no</td>
              <td>NAME</td>
              <td>WEIGHT</td>
              <td>QUANTITY</td>
            </tr>
          </thead>
          <tbody>
            <div *ngFor="let i of arr">
              <tr>
                <td>
                  <div *ngFor="let val of signupForm.controls.i.controls">{{val.value}}</div>
               </td>
              </tr>
            </div>

          </tbody>
        </table>
      </div>
      <button class="btn btn-primary" type="submit">Submit</button>
    </form>
  </div>
</div>

How to fetch the i value and pass it in *ngFor="let val of signupForm.controls.i.controls

I add this signupForm.controls.[i].controls before, but now your signupForm.controls[i].controls worked! Thanks :) — RISHABH SALUJA
– RISHABH SALUJA, Commented Sep 26, 2017 at 13:41

amal · Accepted Answer · 2017-09-26 13:30:39Z

1

For each formArray, you can loop through it by using signupForm.get(i).value in the inside *ngFor loop. (you still need the outside *ngFor as you have in code). Then access the element using {{ val }} instead of {{ val.value }}.

Using the getters is preferred over directly accessing controls of a form when it comes to aot compilation based on this.

EDIT

To get the UI right as per your comments, you probably have to restructure your template a bit to something like this,

<table class="table">
 <thead>
  <tr>
   <td>S.no</td>
   <td>NAME</td>
   <td>WEIGHT</td>
   <td>QUANTITY</td>
  </tr>
 </thead>
 <tbody>
  <tr *ngFor = "let i of signupForm.get('id').value; let k = index">
   <td>{{ signupForm.get('id').value[k] }}</td>
   <td>{{ signupForm.get('name').value[k] }}</td>
   <td>{{ signupForm.get('weight').value[k] }}</td>
   <td>{{ signupForm.get('quantity').value[k] }}</td>
  </tr>                                
 </tbody>
</table>

Here, the initial array let i of signupForm.get('id').value is used to know the length of each formArray. you can use other means if you know to get an array with the right length of elements for that array.

edited Sep 26, 2017 at 13:30

answered Sep 26, 2017 at 12:52

amal

3,1801 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

RISHABH SALUJA Over a year ago

No,ERror! Template parse errors: Parser Error: Unexpected token ., expected identifier or keyword at column 23 in [let val of signupForm..get(i).value

amal Over a year ago

buddy you have 2 dots here (after signupForm): let val of signupForm..get(i).value !! Remove one. :)

RISHABH SALUJA Over a year ago

error is gone but no ouput of array elements, just table titles are showing

amal Over a year ago

access the elements using {{ val }} instead of {{ val.value }}.

RISHABH SALUJA Over a year ago

already tried but all the elements are coming in different row! Why??

|

Collectives™ on Stack Overflow

How fetch array value in nested ngFor?

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related