Input multiple на реактивных формах ангуляра
Запись от 22.06.2018
Создаем форму, где нужный инпут задается форм билдером как
По нужному событию выполняем поиск этого formArray и делаем так:
Пустая строка означает, что к контролам добавляется ещё один, с пустой строкой.
Тут основная фишка в том, что array это массив контролов формы, который в шаблоне можно просто форить, примерно так:
Только стоит помнить, что при передаче такого значения постом через FormData нативный js сконкатенирует строки через запятую, поэтому делаем так:
fb.array([''], Validators)
По нужному событию выполняем поиск этого formArray и делаем так:
const formItem = this.formGroup.controls[myFieldCode] as FormArray;
formItem.push(this.formBuilder.control(''));
Пустая строка означает, что к контролам добавляется ещё один, с пустой строкой.
Тут основная фишка в том, что array это массив контролов формы, который в шаблоне можно просто форить, примерно так:
<ng-container *ngFor="let formControl of formGroup.controls[myFieldCode].controls">
<input ... />
</ng-container>
Только стоит помнить, что при передаче такого значения постом через FormData нативный js сконкатенирует строки через запятую, поэтому делаем так:
const formData = new FormData();
if (isMyFieldCodeIsMultiple) {
formData.append(code, JSON.stringify(value));
} else {
formData.append(code, value);
}