title: How do i display a FormArray of GroupLists?
body: <p>I am trying to make an interactive form that on each row lists an item together with a remove button (called verwijderen in my example). These items are retrieved from the database and each instantiated as a custom object called <code>LaborPeriod</code>.  </p>
  
  <p>These objects are then transformed into <code>FormGroup</code> object and then added to a <code>FormArray</code>. The definition of this formgroup is the following:</p>
  
  <pre><code>  let formGroup = this.fb.group({
      id: this.account.laborperiods[i].id,
      beginDate: this.account.laborperiods[i].beginDate,
      endDate: this.account.laborperiods[i].endDate,
      hours: this.account.laborperiods[i].hours,
      account: this.account.laborperiods[i].account
    })
    if(!this.laborPeriodArray){
      this.laborPeriodArray = new FormArray([])
    }
    this.laborPeriodArray.push(formGroup)
  }
  </code></pre>
  
  <p>The definition of the laborPeriodArray in the main FormGroup is also laborPeriodArray. The main FormGroup looks like the following:</p>
  
  <pre><code>  constructor(private fb: FormBuilder,
                private route: ActivatedRoute,
                private router: Router,
                private accountService: AccountService) {
      this.title = "Account aanpassen";
      //console.log(this.account.enabled + " : " + this.account.role)
      this.accountUpdateForm = this.fb.group({
        name: [''],
        username: ['', [Validators.required, Validators.email]],
        status: '',
        permission:'',
        laborPeriodArray:this.fb.array([])
      });
    }
  </code></pre>
  
  <p>The entire component looks like this: Here you can see that laborPeriodArray gets initialized in the onInit method.</p>
  
  <pre><code>  constructor(private fb: FormBuilder,
                private route: ActivatedRoute,
                private router: Router,
                private accountService: AccountService) {
      this.title = "Account aanpassen";
      //console.log(this.account.enabled + " : " + this.account.role)
      this.accountUpdateForm = this.fb.group({
        name: [''],
        username: ['', [Validators.required, Validators.email]],
        status: '',
        permission:'',
        laborPeriodArray:this.fb.array([])
      });
    }
  
    ngOnInit(): void {
      let formGroupArray: FormGroup[] = [];
      this.route.paramMap
        .switchMap((params: ParamMap) =&gt;
          this.accountService.getAccount(params.get("id")))
        .subscribe(account =&gt; {
          this.account = account;
          for(let i=0; i &lt; account.laborperiods.length; i++){
            let formGroup = this.fb.group({
              id: this.account.laborperiods[i].id,
              beginDate: this.account.laborperiods[i].beginDate,
              endDate: this.account.laborperiods[i].endDate,
              hours: this.account.laborperiods[i].hours,
              account: this.account.laborperiods[i].account
            })
            if(!this.laborPeriodArray){
              this.laborPeriodArray = new FormArray([])
            }
            this.laborPeriodArray.push(formGroup)
          }
          console.log("laborPeriod" + JSON.stringify(this.laborPeriodArray.length))
  
          this.ngOnChanges();
        });
    }
  
    ngOnChanges(): void {
      if (this.account !== undefined) {
        this.accountUpdateForm.reset({
          name: this.account.name,
          username: this.account.username,
          status: this.account.enabled,
          permission: this.account.admin,
          laborPeriodArray: this.laborPeriodArray
        });
      }
    }
  </code></pre>
  
  <p>All the FormGroup items are added but not displayed. The rows are blank. This is the relevant snippet from my HTML page</p>
  
  <pre><code>&lt;table class="table table-hover"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Begin datum&lt;/th&gt;
          &lt;th&gt;Eind datum&lt;/th&gt;
          &lt;th&gt;Aantal uren&lt;/th&gt;
          &lt;th&gt;Actie&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr formArrayName="laborPeriodArray" *ngFor = "let laborperiod of laborPeriodArray.controls; let i = index" [formGroupName]="i"&gt;
          &lt;td formControlName="beginDate"&gt;{{laborperiod.value.get('beginDate') | date:'yyyy-MM-dd'}}&lt;/td&gt;
          &lt;td formControlName="endDate"&gt;{{laborperiod.value.get('endDate') | date:'yyyy-MM-dd'}}&lt;/td&gt;
          &lt;td formControlName="hours"&gt;{{laborperiod.value.get('hours')}}&lt;/td&gt;
          &lt;button type="button" class="btn btn-default"&gt;
            &lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;
            Verwijderen
          &lt;/button&gt;
        &lt;/tr&gt;
  </code></pre>
  
  <p>This is giving me the browser error <code>ERROR Error: Cannot find control with unspecified name attribute</code> but I am specifying the formControlName for each td row. So I don't understand what is causing the error. Furthermore I would also like to know how I can link the Remove button to the data corresponding to each row. I take it I have to use the index I for this but i'm not sure.</p>
  
  <p>EDIT:</p>
  
  <p>After applying AJT_82's solution I still don't have it working. It appears to have something to do with the database retrieved data itself. When I add the example account array of AJT_82 to my ngOnInit() like so:</p>
  
  <pre><code>  account1 = { laborperiods: [{ id: 1, hours:11 }, { id: 2, hours:22 }, { id: 3, hours:33 }] }
  
    ngOnInit(): void {
      this.route.paramMap
        .switchMap((params: ParamMap) =&gt;
          this.accountService.getAccount(params.get("id")))
        .subscribe(account =&gt; {
          this.account = account;
          for(let i=0; i &lt; account.laborperiods.length; i++){
            let formGroup = this.fb.group({
              id: this.account1.laborperiods[i].id,
              beginDate: this.account.laborperiods[i].beginDate,
              endDate: this.account.laborperiods[i].endDate,
              hours: this.account1.laborperiods[i].hours,
              account: this.account.laborperiods[i].account
            })
            this.laborPeriodArray.push(formGroup)
          }
          console.log(JSON.stringify(account.laborperiods[0].beginDate))
          this.ngOnChanges();
        });
    }
  </code></pre>
  
  <p>it works but it shows only 3 rows. That's the total length of the example account array.</p>
  
  <p>This is the account class:</p>
  
  <pre><code>export class Account {
    id: number;
    username: string;
    name: string;
    enabled: boolean
    password: string;
    person: Person;
    admin: boolean;
    laborperiods: LaborPeriod[]
    remainingLeaveHours:number;
  }
  </code></pre>
  
  <p>and this is the LaborPeriod class:</p>
  
  <pre><code>export class LaborPeriod{
      id: number
      beginDate: Date
      endDate: Date
      hours: number
      account: Account
  }
  </code></pre>
  
  <p>Is there anything wrong with its field declarations?</p>