Question

**Problem:**

I have an array of the input field properties like this.

    data = [
       {
         name:"FirstName"
       }
       {
         name: "MobileNo",
         min: 10,
         max:14 
       }
    ]

这是我的HTML表单代码。

    <button (click)="addFormFeild()">Add form feilds</button>

    <form
      [formGroup]="distributionAddForm"
      (ngSubmit)="onSubmit(distributionAddForm.value)"
    >
      <div class="form-group">
        <label>Status :</label>
        <div class="input-group input-group-alternative mb-3">
          <input
            class="form-control"
            id="address"
            type="address"
            formControlName="address"
            required
          />
        </div>
      </div>
    </form>

这是我的component.ts文件代码。

    import { Component } from "@angular/core";
    import {
      Validators,
      FormGroup,
      FormArray,
      FormBuilder,
      FormControl
    } from "@angular/forms";

    const data = [{ name: "First Name" }, { name: "MobileNo", min: 10, max: 14 }];

    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      public distributionAddForm: any;
      constructor(private formBuilder: FormBuilder) {
        this.distributionAddForm = this.formBuilder.group({
          address: new FormControl("", Validators.required)
        });
      }

       addFormFeild() {
    data.map((item, index) => {

    });
  }

      onSubmit(data) {
        console.log(data);
      }
    }

我想要做的是单击添加表单字段按钮时，它应该遍历数据数组，并且应该向distributionAddForm添加一个表单字段，并且应该在表单中呈现一个表单字段。我尝试了很多方法来找出正确的方法，但无法找到一种方法。如果有人可以帮助我找到解决此问题的方法，我将不胜感激。如果需要，sandbox在这里提供了一个沙箱链接。非常感谢。

Answer 1

您可以在反应式上使用addControl()

addFormFields(): void {
 data.forEach(item => {
  this.distributionAddForm.addControl(item.name, this.fb.control(''));
 })
}

环绕模板中的控件（通过使用带有Validators.required的控件，无需在表单标签上添加“ required”）：

<form
      [formGroup]="distributionAddForm"
      (ngSubmit)="onSubmit(distributionAddForm.value)"
    >
    <ng-container *ngFor=let control of form.get('dynamicControls').controls | keyvalue">
      <div class="form-group">
        <label [for]="control.key">{{control.key}}</label>
        <div class="input-group input-group-alternative mb-3">
          <input
            class="form-control"
            [id]="control.key"
            [type]="control.key"
            [formControlName]="control.key"
          />
        </div>
      </div>
    </form>

Answer 2

您可以添加到控件中

addFormFeild() {
   data.map((item, index) => {
       this.distributionAddForm.controls[item.name] = new FormControl("",Validators.required);
   });
}

然后只需迭代控件

<div class="form-group">
    <label>Status :</label>
    <div class="input-group input-group-alternative mb-3">
      <input
        class="form-control"
        *ngFor="let control of distributionAddForm.controls | keyvalue"
        formControlName="{{control.key}}"
        placeholder="{{control.key}}"
      />
    </div>
</div>

如何动态添加输入字段的角度？

2 个答案: