如何为动态字段Angular 4创建表单生成器？

Posted 2023-02-22

【中文标题】如何为动态字段Angular 4创建表单生成器？

【英文标题】：How to create form Builder for Dynamic fields Angular 4?

【发布时间】：2018-06-12 08:13:31

【问题描述】：

我正在基于 Json 动态创建字段。例如，如果我的 json 数组有 3 个值，那么我将动态创建 3 个输入复选框，如下所示

<ng-template ngFor let-numberOfRow [ngForOf]="numberOfRows">
   <mat-checkbox [formControlName]="numberOfRow.row" [value]="numberOfRow.row" [name]="numberOfRow.row">All</mat-checkbox>
</ng-template>

现在我正在尝试为这个字段创建 formBuilder，如下所示，但它不起作用。有人可以告诉我如何为动态字段声明表单生成器吗？

public ngOnInit() 
   this.myForm= this.fb.group(this.formFields);

public formFields() 
    let empArr = [];
    for (let val of this.myArrayList) 
        empArr.push(val + ": ''");
    
    let allFields = '' + empArr.join(',') + '';
    return allFields;

基本上上面的formFields函数会返回这样的字符串 allRow: '', firstRow: '', secondRow: '', thirdRow: ''

所以如果静态声明this.myForm= this.fb.group( allRow: '', firstRow: '', secondRow: '', thirdRow: '' ); 我想动态声明字段。

【问题讨论】：

为什么要在formFields() 中创建字符串？首先，如果您想要一个对象，请创建一个对象其次，永远不要尝试手动创建 json，它容易出错，比需要的工作更多，并且大多数语言中都有序列化程序将对象转换为 json

感谢@charlietfl，我将数据作为字符串发送导致错误。现在将值作为对象传递，它的工作正常:)

【参考方案1】：

您可以首先使用FormBuilder 的control 方法在代码中构建FormControl，然后使用FormGroup 的addControl 方法。比如这样：

this.myForm.addControl('controlName', 
   this.fb.control( disabled: false, value: controlValue , validators, asyncValidators));

然后您需要使用FormControlDirective 而不是FormControlName 指令绑定它，因为控件已经创建。绑定将如下所示：

<mat-checkbox [formControl]="myForm.controls['controlName']" [value]="numberOfRow.row" [name]="numberOfRow.row">All</mat-checkbox>

【讨论】：

感谢@AlesD 问题是我以 STRING 类型发送数据，所以现在改为 Object now working fine。

【参考方案2】：

根据@charlietfl 的问题是我发送的是字符串数据而不是对象，所以我像下面这样发送对象现在它工作正常。

public ngOnInit() 
    this.myForm= this.fb.group(this.formFields());
 
 public formFields() 
     let empArr = ;
     for (let val of this.myArrayList) 
         empArr[val] = '';
     
     return empArr;
 

所以上面的方法 formField 创建了像 allRow: '', firstRow: '', secondRow: '', thirdRow: '' 这样的对象，所以现在它工作正常。谢谢大家:)

【参考方案3】：

使用 formBuilder 构建示例：

component.ts

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  )  

  ngOnInit() 
    this.form = this.fb.group(
      dropOffAddress : ['', Validators.required]
    )

  

  addInput() 
    this.form.addControl(`input-$Object.keys(this.form.value).length`, new FormControl('', [Validators.required]))
  

  removeInput(key: string) 
    this.form.removeControl(key)

  

component.html

<form [formGroup]="form" *ngIf="show">
  <ng-container *ngFor="let f of form.controls | keyvalue">
    <mat-form-field appearance="outline" class="w-100" color="primary">
      <mat-label>Label of Input</mat-label>
      <mat-icon (click)="addInput()" color="accent" matPrefix>add</mat-icon>
      <input type="text" [formControlName]="f.key" [name]="f.key" autofocus matInput placeholder="Digite um endereço">
      <mat-icon (click)="removeInput(f.key)" matSuffix>remove</mat-icon>
      <mat-error *ngIf="form.invalid">Please fill the field</mat-error>
    </mat-form-field>
  </ng-container>
</form>

【参考方案4】：

我维护一个包含 json 对象字段名称的数组和一个包含表单控件的数组，然后我遍历字段名称以创建表单复选框

TypeScript 文件：

import  FormBuilder, FormGroup  from '@angular/forms';

export class SomeComponent

  form!: FormGroup;
  fieldNames: string[];
  formControls: any;

  constructor(
    private formBuilder: FormBuilder,
  )
  
      const someJsonOnject = env: "Dev", name: "SRV", ver: "21.1" ;
      this.fieldNames= [];
      this.formControls= ;

      Object.keys(someJsonOnject).forEach(currentFieldName => 
        // add the current field name to the fieldNames array
        this.fieldNames.push(currentFieldName);

        // create a boolean formControl from each field
        this.formControls[currentFieldName] = [true];
      );
            
      // add formControls to the form
      this.form = this.formBuilder.group(this.formControls);
  

HTML 模板文件：

<form [formGroup]="form">
    <ng-container *ngFor="let currentFormControl of fieldNames">
        <div><mat-checkbox formControlName=" currentFormControl "> currentFormControl </mat-checkbox></div>
    </ng-container>
</form>