Angular：使用动态循环输入设置反应形式

Question

我必须为使用数据循环进行输入的表单设置反应式表单验证：

我的表单生成器看起来像这样：

constructor(private formBuilder: FormBuilder) { 
    this.userForm = this.formBuilder.group({
      'inputOne': ['', [Validators.required]],
      'inputOne': ['', [Validators.required]],
       ...
      'inputN': ['', [Validators.required]]
    });
  }

我的模板如下所示：

<form [formGroup]="userForm">
  <div class="form-group" *ngFor="let item of items; let i=index;">
        <label for="lastName">{{item.name}}</label>
        <input class="form-control" name="lastName" id="lastName" type="text" [formControlName]="item.name">
      </div>
</form>

从我的后端动态加载项目的地方

如何以 Angular 反应形式动态填充控件？

Answer 1

您可以在ngOnInit()启动后端代码，并根据响应使用addItem(item)推送控件。 请参考我提供的示例代码片段。

动态表格。组件

       import { Component, OnInit } from '@angular/core';
        import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
        @Component({
          selector: 'app-dynamic-form',
          templateUrl: './dynamic-form.component.html',
          styleUrls: ['./dynamic-form.component.css']
        })

        export class DynamicFormComponent implements OnInit {
        demoForm: FormGroup;

           arrayItems: {
             id: number;
             title: string;
           }[];

           constructor(private _formBuilder: FormBuilder) {
              this.demoForm = this._formBuilder.group({
                 demoArray: this._formBuilder.array([])
              });
           }

           ngOnInit() {
             this.arrayItems = [];
           }

       get demoArray() {
          return this.demoForm.get('demoArray') as FormArray;
       }

       addItem(item) {
          this.arrayItems.push(item);
          this.demoArray.push(this._formBuilder.control(false));
       }

       removeItem() {
          this.arrayItems.pop();
          this.demoArray.removeAt(this.demoArray.length - 1);
       }

}

dynamic-form.component.html

<form [formGroup]="demoForm">
   <div formArrayName="demoArray" 
      *ngFor="let arrayItem of arrayItems; let i=index">

      <input [id]="arrayItem.id" type="checkbox"
         [formControl]="demoArray[i]">
      <label [for]="arrayItem.id" class="array-item-title">
         {{arrayItem.title}}</label>

   </div>
</form>

Answer 2

听起来你想要一个表单数组，而不是一个组......

  constructor(private formBuilder: FormBuilder) { 
    // build an empty form array
    this.userForm = this.formBuilder.array([]); 
  }

  // call this whenever you need to add an item to your array
  private addItem(item) {
    // build your control with whatever validators / value
    const fc = this.formBuilder.control(i.lastName, [Validators.required]);
    this.userForm.push(fc); // push the control to the form
  }

  // call this function whenever you need to reset your array
  private resetFormArray(items) {
    this.userForm.clear(); // clear the array
    items.forEach(i => this.addItem(i)); // add the items
  }

<form [formGroup]="userForm">
  <div class="form-group" *ngFor="let item of items; let i=index;">
    <label for="lastName">{{item.name}}</label>
    <input class="form-control" name="lastName" id="lastName" type="text" [formControlName]="i">
  </div>
</form>

请注意，您在此处使用表单控件名称的索引