Дублирование полей Template driven формы, как разделить данные?

Question

[Алёна Хреновская]

Есть поле, в которое вводится число (так нужно) и, например, пользователь ввел 3 - после чего в форме появилось 3 блока с одинаковыми полями:
Блок 1:
Имя Дата Описание
Блок 2:
Имя Дата Описание
Блок 3:
Имя Дата Описание

Через ngModel сложность с тем, что дублируются введенные данные по всем полям, как это все грамотно обыграть, тем более, что данные по каждому блоку формируют модель (сущность), которая будет отправляться в БД на следующем этапе.

Answer 1

[Aset]

в цикле делай items-block-* и это будет ngModel

В цикле создаешь все это массивы
примерно так должно быть

items-block-1 :  {
name: 'имя'
des: 'desc',
date : '27.08.2018
}

items-block-2 :  {
name: 'имя'
des: 'desc',
date : '27.08.2018
}

Дальше обрабатывай массив по форме.

Answer 2

[0xD34F]

Понадобится свойство - массив данных блоков, и метод, который будет принимать количество блоков и добавлять или удалять данные, в зависимости от того, как переданное значение соотносится с текущим количеством блоков:

formData = [];

updateFormData(newLen) {
  const oldLen = this.formData.length;

  if (oldLen > newLen) {
    this.formData.splice(newLen, oldLen);
  } else if (oldLen < newLen) {
    this.formData.push(...Array.from({ length: newLen - oldLen }, n => ({
      /* здесь дефолтные данные блока */
    })));
  }
}

Инпут, задающий количество блоков - длину массива с данными блоков цепляете к нему в качестве значения, а при изменении вызываете метод обновления данных:

<input
  type="number"
  [ngModel]="formData.length"
  (ngModelChange)="updateFormData($event)"
>

Ну и вывод блоков:

<div *ngFor="let item of formData;">
  <!-- здесь создаёте input'ы, цепляете к ним через [(ngModel)] свойства item'а -->
</div>

https://stackblitz.com/edit/angular-q534id?file=sr...