Question

我是基于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，但它不起作用。有人可以告诉我如何为动态字段声明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: '' });我想动态声明字段。

Answer 1

您可以首先使用FormControl的control方法在代码中构建FormBuilder，然后使用addControl的FormGroup方法来执行此操作。例如：

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>

Answer 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: '' }这样的对象，所以现在它的工作正常。谢谢大家：）

Answer 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>

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

3 个答案: