角度动态表单添加嵌套表单数组

Question

我正在尝试创建一个动态表单，您可以在其中动态添加表单，并动态添加子表单。例如：

+ user1  
--- + color1  
--- + color2  
--- + color3  
+ user2  
--- + color1  
--- + color2  
--- + color3  
+ user 3  
--- + color1

您可以根据需要添加任意数量的用户，并且可以为每个用户添加任意​​数量的颜色。我可以让第一个数组工作（用户），但不确定嵌套数组（颜色）。我已经设置好了，所以它会在开始时加载用户和颜色。这是我到目前为止的代码：

export class FormsComponent implements OnInit {

  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      email: '',
      users: this.fb.array([])
    })
  }

  get userForms() {
    return this.myForm.get('users') as FormArray
  }

  get colorForms() {
    return this.userForms.get('colors') as FormArray
  }

  addUser() {
    const userGroup = this.fb.group({
      user: [],
      colors: this.fb.array([])
    })
    this.userForms.push(userGroup);
  }

  deleteUser(i) {
    this.userForms.removeAt(i);
  }

  addColor() {
    const colorGroup = this.fb.group({
      color: []
    })
    this.colorForms.push(colorGroup);
  }

  deleteColor(i) {
    this.colorForms.removeAt(i)
  }

}

这是我的 html 代码：

<form [formGroup]="myForm">

  <hr>

  <input formControlName="email">

  <div formArrayName="users">

    <div *ngFor="let user of userForms.controls; let i=index" [formGroupName]="i">

      <input formControlName="user">

      <button (click)="deleteUser(i)">Delete User</button>

      <div formArrayName="colors">

        <div *ngFor="let color of colorForms.controls; let t=index" [formGroupName]="t">

          <input formControlName="color">

          <button (click)="deleteColor(t)">Delete Color</button>

        </div>

      </div>

    </div>

  </div>

  <button (click)="addUser()">Add User</button>

</form>

显然这不起作用，所以我试图理解我需要做什么。

Answer 1

它不起作用，因为您没有考虑存储控件的索引。

例如

get colorForms() {
    return this.userForms.get('colors') as FormArray
}

由于userForms 返回FormArray 并且您必须指定索引以获取属于特定用户的colors 控件，因此无法正常工作。

所以它可能看起来像：

getColors(index) {
  return this.userForms.get([index, 'colors']) as FormArray;
}

在 html 中：

<div *ngFor="let color of getColors(i).controls;...>

在使用colors 数组时，您还需要牢记这一点：

addColor(index: number) {
  const colorGroup = this.fb.group({
    color: []
  })

  this.getColors(index).push(colorGroup);
        ^^^^^^^^^^^^
 use the them method to get correct FormArray
}

deleteColor(userIndex: number, colorIndex: number) {
  this.getColors(userIndex).removeAt(colorIndex);
}

另请参阅Ng-run Example