javascript - Angular 动态表单添加嵌套表单数组

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