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

What is your requirement? Single form with multiple fields or multiple forms for each formgroup? — Krishna Mohan
– Krishna Mohan, Commented Mar 23, 2021 at 14:07

Krishna Mohan · Accepted Answer · 2021-03-23 14:28:15Z

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>

answered Mar 23, 2021 at 14:28

Krishna Mohan

1,7423 gold badges19 silver badges27 bronze badges

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

1 Comment

xcelm Over a year ago

This is the way! Thanks a lot

TotallyNewb · Accepted Answer · 2021-03-23 13:42:07Z

0

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.

answered Mar 23, 2021 at 13:42

TotallyNewb

4,8801 gold badge16 silver badges22 bronze badges

1 Comment

xcelm Over a year ago

this doesnt seem to work - Im getting "Cannot find name 'FormGroup'.ts(2304)" error. I tried to do this "import { FormBuilder, FormArray, FormGroup } from '@angular/forms';" But then there is error with FormGroup and there is no help on the error

Tùng Phạm Thanh · Accepted Answer · 2021-03-23 15:50:49Z

0

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

let fg of bankAccountForms.controls as FormGroup[]

answered Mar 23, 2021 at 15:50

Tùng Phạm Thanh

133 bronze badges

Collectives™ on Stack Overflow

using [formGroup] in angular

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related