angular - 包含列表的Angular2反应形式

Question

我正在尝试为用户创建一个表单，该表单将允许一个可能的电话号码与用户相关联。这可能与当前的反应形式实现吗？例如，我希望下面的表格可以接受很多电话号码。我的前端实现会显示电话号码字段，并且会有一个按钮，允许添加额外的电话号码字段。

userForm = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('', Validators.required),
  phoneNumber: new FormControl('', Validators.required)
});

我的黑客解决方案是

userForm = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('', Validators.required),
  phoneNumber: new FormControl('', Validators.required),
  phoneNumber1: new FormControl(),
  phoneNumber2: new FormControl(),
  phoneNumber3: new FormControl(),
  phoneNumber4: new FormControl()
});

在单击添加其他电话号码按钮之前，我可以抑制其他电话字段。

Answer 1

您要使用的是FormArray可以动态添加新表单控件的位置：

constructor(private fb: FormBuilder) {  }

// build form
this.userForm = this.fb.group({
  numbers: this.fb.array([
    new FormControl()
  ])
});


// push new form control when user clicks add button
addNumber() {
  const control = <FormArray>this.userForm.controls['numbers'];
  control.push(new FormControl())
}

然后你的模板：

<form [formGroup]="userForm" (ngSubmit)="submit(userForm.value)">
<div formArrayName="numbers">
  <!-- iterate the array of phone numbers -->
  <div *ngFor="let number of userForm.controls.numbers.controls; let i = index" >
      <label>PhoneNumber {{i+1}} </label>
      <input formControlName="{{i}}" />
  </div>
</div>
<button type="submit">Submit</button>
</form>

演示