Angular Reactive Form，动态创建表单控件

Question

我有一个需要有一个或多个简单输入字段的反应形式。 因此，我正在对 go ovr 对 object 数组进行 *ngFor 操作，并且可以成功创建标签。 我也可以创建输入字段，但我不知道如何跟踪其中输入的值。 我需要收集用户输入的输入并将其发送到后端。

我该怎么做？ 我做了研究，发现我应该使用一个数组来保存所有可能数量的生成输入字段。 但是我如何为它创建表单控件。

    <form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
      <div class="form-group p-mb-4"  *ngFor="let _insertField of actionsetSelected; let i=index">
         <label class="formLabel" *ngIf="_insertField" for="userInput">{{_insertField.name}}</label>
         <input type="text" class="form-control" id="insertNames" [formControlName]="i">
      </div>
    <button label="Submit" ></button>
</form>

 

in my ts:

 
this.SignupForm = new FormGroup({
    'insertNames':new FormArray([])
  });

Answer 1

它非常简单.. 只需在表单或任何表单字段上使用valueChanges .. 例如。

假设我有一个名为email的表单，在我的 ts 文件中，我可以执行以下操作。

ngAfterViewInit() {
    this.SignupForm.email.valueChanges.pipe(
       tap(value: string) => { // value is the email the user entered
    
           // do what ever you want with value     

       }
    ).subscribe()
}

您当然可以像这样收听 object 表格。

ngAfterViewInit() {
    this.SignupForm.valueChanges.pipe(
       tap(value: string) => { // value is your form object containing all the fields
    
           // do what ever you want with value     

       }
    ).subscribe()
}

不要忘记取消订阅！