Как динамически добавить поле ввода в angular?

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 и отобразить поле формы в форме. Я пробовал много способов выяснить, как это сделать правильно, но не смог найти способ сделать это. Если кто-то поможет мне найти решение этой проблемы, я буду благодарен. Здесь я при необходимости предоставляю ссылку на песочницу песочницу . Большое спасибо.

Answer 1

Вы можете использовать addControl() в своей реактивной форме:

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

L oop над элементами управления внутри вашего шаблона (кстати, вам не нужно добавлять 'required' в форму с элементом управления, для которого уже требуется Validators.):

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