formControlName 指令和 FormArray 问题

Question

我正在学习一本 Angular 书，但我被困在一个反应式表单示例上。我已经从书中复制了一对一的代码，但它根本不起作用。我检查了很多文档，发现了一种解决问题的不同方法，但仍然不明白我在这个具体示例中做错了什么。谁能帮忙？谢谢！

组件代码:

 heroDetails = new FormGroup({
    name: new FormControl(''),
    realName: new FormControl(''),
    biometricData: new FormGroup({
      age: new FormControl(''),
      eyes: new FormControl(''),
      hair: new FormControl('')
    }),
    powers: new FormArray([])
    });

  get powers(): FormArray {
    return this.heroDetails.controls.powers as FormArray;
  }
  
  addPower() {
    this.powers.push(new FormControl(''));
  }

模板标记:

<form [formGroup]="heroDetails">
    <button (click)="addPower()">Add power</button>
    <div *ngFor="let power of powers.controls; index as i">
        <label>
        Power:
        <input type="text" [formControlName]="i">
        </label>
    </div>
</form>

当我启动应用程序并按下“添加电源”按钮时，我在浏览器的控制台中收到以下错误消息：

ERROR Error: Cannot find control with name: '0'

我找到的解决方法：

<form [formGroup]="heroDetails">
    <button (click)="addPower()">Add power</button>
    <div *ngFor="let power of powers.controls; index as i">
        <label>
        Power:
        <input type="text" [formControl]="powers.controls[i]">
        </label>
    </div>
</form>

Answer 1

像这样在您的表单组中添加一个新的表单控件：

heroDetails.addControl('controlName', new FormControl());

Answer 2

您需要将 formArrayName 放入控制循环中。

<form [formGroup]="heroDetails">
    <button (click)="addPower()">Add power</button>
    <div formArrayName="powers" *ngFor="let power of powers.controls; index as i">
        <label>
        Power:
        <input type="text" [formControlName]="i">
        </label>
    </div>
</form>

工作stackblitz示例：https://stackblitz.com/edit/form-array-angular-ojruc3?file=src/app/app.component.html

formControlName 指令和 FormArray 问题

formControlName directive and FormArray issue

angular

angular-reactive-forms

angular-directive