web-dev-qa-db-ja.com

リストを含むAngular2反応フォーム

ユーザーに電話番号を関連付けることができるユーザー用のフォームを作成しようとしています。これは、リアクティブフォームの現在の実装で可能ですか？たとえば、以下のフォームで多くの電話番号を受け入れることができるようにしたいと思います。私のフロントエンドの実装では、電話番号フィールドが表示され、追加の電話番号フィールドを追加できるボタンがあります。

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()
});

[追加の電話番号を追加]ボタンがクリックされるまで、追加の電話フィールドを抑制できます。

angularreactive-forms
10
meanstack

使用したいのは 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>

デモ

15
AJT82