组角6内的嵌套formarray答案

【问题标题】：nested formarray within group angular 6组角6内的嵌套formarray
【发布时间】：2019-03-20 17:30:43
【问题描述】：

美好的一天。

我寻找了解决方案，尽管有一个与我所问的问题相似的观点，但我确信这个问题更独特，而不是重复。

这是我的 html 表单：

<div class="form-group col-md-6" formGroupName="schema">
  <div formArrayName="currencies">
    <input type="text" class="form-control" id="percentage" formControlName="percentage" placeholder="Discount %*" required>
  </div>
</div>

这是我的 ts formBuilder。

this.createPromo = this.fb.group({
      type: ['promotion'],
      name: ['', Validators.required],
      description: ['', Validators.required],
      enabled: ['', Validators.required],
      promotion_type: ['', Validators.required],
      start: ['', Validators.required],
      end: ['', Validators.required],
      schema: this.fb.group({
        currencies: this.fb.array([
          this.fb.group({
            percentage: '',
            currency: 'ZAR'
          })
        ])
      }),
    });

所以我希望我的表单作为分组数组提交。但是控制台中的错误如下Cannot find control with path: 'schema -> currencies -> percentage'，因此我无法提交我的表单，因为即使我输入了一个数字，percentage 也是空的。

【问题讨论】：

你需要一个包装 div 和 formArrayName="currencies" 并在里面另一个 [formGroup]="i" 我将是你循环通过的数组元素的索引，然后在里面，你会有你的formControlName="percentage" 和formControlName="currency"

标签： angular angular-reactive-forms formarray

【解决方案1】：

您的场景需要以下内容：

父 div 和 formGroupName="schema"。
在其中，div 和 formArrayName="currencies"。
在其中，div 和 ngFor="let currencyGroup of currencyFormGroups; let i = index;"。请注意，currencyFormGroups 是组件类中的一个 getter。
在其中，div 和 [formGroupName]="i" 其中 i 是我们在 *ngFor 中动态创建的索引。
说明，两个inputs 分别为formControlName="percentage" 和formControlName="currency"。

以下是将所有这些步骤转换为代码：

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  createPromo: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.createPromo = this.fb.group({
      'type': ['type'],
      name: ['name', Validators.required],
      description: ['description', Validators.required],
      enabled: ['enabled', Validators.required],
      promotion_type: ['promotion_type', Validators.required],
      start: ['start', Validators.required],
      end: ['end', Validators.required],
      schema: this.fb.group({
        currencies: this.fb.array([
          this.fb.group({
            percentage: 'percentage',
            currency: 'ZAR'
          }),
          this.fb.group({
            percentage: 'percentage',
            currency: 'INR'
          }),
        ])
      }),
    });
  }

  get currencyFormGroups() {
    return (<FormArray>(<FormGroup>this.createPromo.get('schema')).get('currencies')).controls;
  }

}

模板：

<form [formGroup]="createPromo">

  ...

  <div formGroupName="schema">
    <div formArrayName="currencies">
      <div *ngFor="let currencyGroup of currencyFormGroups; let i = index;">
        <div [formGroupName]="i">
          <input 
            type="text" 
            name="percentage"
            formControlName="percentage">
          <input 
            type="text" 
            name="currency"
            formControlName="currency">
        </div>
      </div>
    </div>
  </div>

</form>

这里有一个Sample StackBlitz 供您参考。

PS：为简单起见，我将所有表单控件视为input。请进行相应的更改。

【讨论】：