using [formGroup] in angular

Question

I'm trying to learn Angular for front-end development. I was watching some tutorials and in one of the projects I am supposed to create a table with inputs.

Component code

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

@Component({
  selector: 'app-bank-account',
  templateUrl: './bank-account.component.html',
  styleUrls: ['./bank-account.component.css']
})
export class BankAccountComponent implements OnInit {

  bankAccountForms: FormArray = this.fb.array([]);
  constructor(private fb: FormBuilder) { }

  ngOnInit(){
    this.addBankAccountForm();
  }

  addBankAccountForm(){
    this.bankAccountForms.push(this.fb.group({
      bankAccountID: [0],
      accountNumber: [''],
      accountHolder: [''],
      bankID: [0],
      IFSC: ['']
    }))
  }

}

html code

<div class="grid-table">
    <div class="thead">
<div class="tr">
    <div class="td">Account No.</div>
    <div class="td">Account Holder</div>
    <div class="td">Account Bank</div>
    <div class="td">Account IFSC</div>
</div>

    </div>
    <div class="tbody">
<form class="tr" [formGroup]="fg" *ngFor= "let fg of bankAccountForms.controls">
    <div class="td"><input class="form-control" formControlName="accountNumber"></div>
    <div class="td"><input class="form-control" formControlName="accountHolder"></div>
    <div class="td"><input class="form-control" formControlName="bankID"></div>
    <div class="td"><input class="form-control" formControlName="IFSC"></div>
</form>

    </div>

</div>

component is registered in app.component.html as .

when debugging I can see the table is messed up and I get this error:

Failed to compile.

src/app/bank-account/bank-account.component.html:12:19 - error TS2740: Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.

12 <form class="tr" [formGroup]="fg" *ngFor= "let fg of bankAccountForms.controls"> ~~~~~~~~~

src/app/bank-account/bank-account.component.ts:6:16 6 templateUrl: './bank-account.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component BankAccountComponent.

I tried to google this error, but as my knowledge is very limited I could not find an answer that could help me on this.

Anyone dealt with this error before?

Thanks

Answer 1

The reason for error is that bankAccountForms.controls return AbstractControl[] not FormGroup[].

You can add a getter in your component as below:

get bankAccounts(): FormGroup[] { return this.bankAccountForms.controls as FormGroup[]; }

And update the html.

<form class="tr" [formGroup]="fg" *ngFor= "let fg of bankAccounts">
    <div class="td"><input class="form-control" formControlName="accountNumber"></div>
    <div class="td"><input class="form-control" formControlName="accountHolder"></div>
    <div class="td"><input class="form-control" formControlName="bankID"></div>
    <div class="td"><input class="form-control" formControlName="IFSC"></div>
</form>

Answer 2

You're binding the form to a formgroup that was not declared:

[formGroup]="fg"

In your typescript code, add:

fg: FormGroup = this.fb.group({
  bankAccountForms: this.bankAccountForms
});

After the bankAccountForms have been initialized.

Answer 3

The error is bankAccountForms.controls is not formControl , you can cast it by your own:

let fg of bankAccountForms.controls as FormGroup[]