以反应形式添加和字段 Angular 2+

Question

我正在使用反应式表单，我想 add/remove 当我点击一个按钮时我的表单的一个字段，就像这个例子（它是我想要的原型）：

这意味着，当我点击 + 按钮时，另一个具有相同字段的 select 会出现。当我点击 - 时，该字段将被删除

Answer 1

来自https://www.udemy.com/the-complete-guide-to-angular-2/learn/v4/overview

您可以遵循相同的模式

form.html

<div formArrayName="hobbies">
          <h4>Your Hobbies</h4>
          <button
            class="btn btn-default"
            type="button"
            (click)="onAddHobby()">Add Hobby</button>
          <div
            class="form-group"
            *ngFor="let hobbyControl of signupForm.get('hobbies').controls; let i = index">
            <input type="text" class="form-control" [formControlName]="i">
          </div>
        </div>

form.ts

this.signupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, [Validators.required, this.forbiddenNames.bind(this)]),
        'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails)
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    });

onAddHobby() {
    const control = new FormControl(null, Validators.required);
    (<FormArray>this.signupForm.get('hobbies')).push(control);
  }

以反应形式添加和字段 Angular 2+

Add and fields in a reactive form Angular 2+

angular

typescript

angular-reactive-forms

angular-forms

form.html