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

并在html中：

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

使用<div *ngFor="let color of getColors(i).controls;...>数组时，您还需要牢记这一点：

colors

另请参阅 Ng-run Example

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

1 个答案: