时间戳

首页 > 解决方案 > Angular Reactive Form，动态创建表单控件

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

问题描述

我有一个需要有一个或多个简单输入字段的反应形式。所以我正在做一个 *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([])
  });

标签： angularforms

解决方案

它非常简单.. 只需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()
}

你当然可以像这样听表单对象..

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

不要忘记取消订阅！

推荐阅读