Как динамически создать множество полей в форме(angular)?

В Angular, чтобы динамически создать множество полей в форме, можно использовать директиву ngFor для создания повторяющихся элементов и использовать массив объектов для хранения данных. Давайте рассмотрим следующий пример.

Сначала, у нас должен быть массив объектов, который будет содержать данные для каждого динамического поля в форме.

// component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  fields: any[] = [];

  addField() {
    this.fields.push({});
  }

  removeField(index: number) {
    this.fields.splice(index, 1);
  }

  onSubmit() {
    // обработка данных формы
    console.log(this.fields);
  }
}

Затем, в шаблоне компонента (app.component.html), мы можем использовать ngFor для создания динамических полей во время рендеринга.

<!-- app.component.html -->
<form (ngSubmit)="onSubmit()">
  <div *ngFor="let field of fields; let i = index" [attr.data-index]="i">
    <input type="text" [(ngModel)]="field.value" name="field_{{i}}" placeholder="Field {{i+1}}">
    <button type="button" (click)="removeField(i)">Удалить поле</button>
  </div>
  <button type="button" (click)="addField()">Добавить поле</button>
  <button type="submit">Отправить</button>
</form>

В данном примере, при нажатии на кнопку "Добавить поле" вызывается метод addField(), который добавляет пустой объект в массив fields. Каждый элемент массива соответствует динамическому полю в форме.

Также у каждого элемента div мы добавили атрибут data-index, который содержит индекс элемента. Это поможет при вызове метода removeField() для удаления поля соответствующего данному индексу.

При нажатии на кнопку "Удалить поле" вызывается метод removeField(index), который удаляет соответствующий элемент из массива fields по указанному индексу.

В методе onSubmit() мы можем обрабатывать данные формы как нужно в соответствии с бизнес-логикой нашего приложения.

Таким образом, мы динамически создаем множество полей в форме в Angular, используя директиву ngFor и массив объектов для хранения данных.