我如何遍历 Angular 中的输入字段名称和值？

Question

我正在根据以下模型的动态数据动态创建表单控件

{"name": "firstName"},
{"name": "lastName" }

<form [formGroup]="myForm" #formDirective="ngForm" >
    <div *ngFor="let n of data">
                <mat-form-field appearance="outline" >
                  <mat-select required [(value)]="selected" name="{{n.name}}">
                    <mat-option value="equal" >Equals</mat-option>
                    <mat-option value="notequal">Not Equals</mat-option>
                  </mat-select>
                </mat-form-field>
        
                <mat-form-field appearance="outline">
                  <input matInput name="{{n.name}}"> 
                </mat-form-field> 
    </div>
</form>

我想发送我需要遍历字段并获取字段名称和值的动态数据。

我尝试了下面的代码，但没有成功..有人可以帮我吗

myForm: any;
this.myForm = this.formBuilder.array([]); 
    Object.keys(this.myForm.controls).forEach((name) => {
          let currentControl = this.myForm.controls[name];
    
            console.log("name: " + name, "value: " +currentControl.value);
        });

Answer 1

当您使用 formBuilder 时，您可以使用 this.formBuilder.group()，例如：

args;
myForm;

startFormGroup(args){
   this.args = args;
   let aux = {};
   for(let arg of args){
      aux[arg] = new FormControl('');
   }
   myForm = this.formBuilder.group(aux);
}

然后，在 html 中你可以使用类似的东西：

<form [formGroup]="form.form" #formDirective="ngForm">
   <div *ngFor="let arg  of args">    
        <mat-form-field appearance="outline">
          <input matInput name="{{arg}}" formControlName="{{arg}}"> 
        </mat-form-field> 
    </div>
 </form>

请注意，这是一个模板，我还没有测试代码。

请参阅我对问题的回答以获取另一个类似示例。

如有需要，请随意询问。

我如何遍历 Angular 中的输入字段名称和值？

How do i iterate over the input field names and values in Angular?

angular-material

angular