如何将 formArray 添加到 formGroup？

Question

首先为我的英语道歉。

我在尝试将数组字段添加到 formGroup 时遇到问题。

我正在尝试使用 push 方法将 formArray 添加到我的费率 formGroup，我认为错误是由于 formControlName。

当我搜索并阅读问题时，它在那里，但我无法解决它，请有人帮助我吗？

我创建了这个 stackblitz，所以你可以看到它给我的错误。

https://stackblitz.com/edit/angular-mlk2mh

Answer 1

要使用 FormArray，您需要了解这一点：

                Need form group
                   \/\/\/
<form [formGroup]="rates">
    <input type="text" placeholder="credit_card" formControlName="credit_card" />
                       Need form array name
                          \/\/\/
    <div formArrayName="servicesRates" *ngFor="let item of rates.get('servicesRates').controls; let i = index;">
        <div [formGroupName]="i"> <-- this is important
            <input type="text" placeholder="id" formControlName="id" />
            <input type="text" placeholder="Servicio" formControlName="service" />
            <input type="text" placeholder="Price" formControlName="price" />
        </div>
    </div>
</form>

要在 HTML 之上工作，您的 TS 必须是：

rates: FormGroup;
servicesRates: FormArray;

this.rates = this._formBuilder.group({
  credit_card: [null, Validators.compose([Validators.required, Validators.minLength(8)])],
  servicesRates: this._formBuilder.array([
    this._formBuilder.group({
      id: 0,
      service: '',
      price: 0,
    })
  ])
});

和addNew函数：

addField() {
   this.servicesRates = this.rates.get('servicesRates') as FormArray;
   this.servicesRates.push(this.servicesRates);
}