代码之家 › 专栏 › 技术社区 › Jonathan

角动态窗体添加嵌套窗体数组

angular-formbuilder angular-forms angular javascript

Jonathan · 技术社区 · 7 年前

我试图创建一个动态表单,您可以在其中动态添加表单和子表单。例如:

+ 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>

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

1 回复 | 直到 7 年前

yurzui 7 年前

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

例如

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;...>

你在工作的时候也要记住这一点 颜色 数组:

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