在角度使用 [formGroup]

Question

我正在尝试学习 Angular 进行前端开发。我正在观看一些教程，并且在其中一个项目中我应该创建一个带有输入的表。

组件代码

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代码

<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>

组件在 app.component.html 中注册为 .

调试时，我可以看到表被搞砸了，我得到了这个错误：

编译失败。

src/app/bank-account/bank-account.component.html:12:19 - 错误 TS2740： 类型“AbstractControl”缺少类型中的以下属性 'FormGroup'：控件、registerControl、addControl、removeControl 和 还有 3 个。

12

~~~~~~~~~

src/app/bank-account/bank-account.component.ts:6:16 6 templateUrl: './bank-account.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件BankAccountComponent的模板出错。

我试图用谷歌搜索这个错误，但由于我的知识非常有限，我找不到可以帮助我解决这个问题的答案。

以前有人处理过这个错误吗？

谢谢

Answer 1

报错是 bankAccountForms.controls is not formControl ，你可以自己投：

let fg of bankAccountForms.controls as FormGroup[]

Answer 2

出错的原因是bankAccountForms.controlsreturnAbstractControl[]不是FormGroup[]。

您可以在组件中添加一个 getter，如下所示：

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

并更新 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 3

您将表单绑定到未声明的表单组：

[formGroup]="fg"

在您的打字稿代码中，添加：

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

bankAccountForms 被初始化后。