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