#angular #angular-reactive-forms
#угловой #угловые реактивные формы
Вопрос:
У меня есть FormGroup, которая содержит массив форм, в который я хочу установить массив данных, которые я получаю из API, но, видимо, я не делаю это полностью возможным.
Форма
this.blog = this.fb.group({
title: ['', Validators.required],
description: ['', Validators.required],
date: [date, [Validators.required, this.dateValidator]],
companyId: ['', Validators.required],
isActive: [false],
paragraphs: this.fb.array([])
});
paragraphs(): FormArray {
return this.blog.get("paragraphs") as FormArray
}
newParagraph(): FormGroup {
return this.fb.group({
section: ''
})
}
addParagraph() {
this.paragraphs().push(this.newParagraph());
}
Здесь я пытаюсь установить значения
this.blog.setControl('paragraphs', this.fb.array(this.blogUpdate.paragraphs || []));
Html-код
<tr *ngFor="let paragraph of paragraphs().controls; let i = index" [formGroupName]="i">
<td colspan="2">
Parrafo:
<textarea formControlName="section" (change)="saverange($event, paragraph.value.paragraphId, i)" [value]="paragraph.value.section" type="text" rows="7"
class="form-control"></textarea>
</td>
</tr>
Результат
Ошибка
Ответ №1:
Создайте paragraphs() в качестве средства получения вместо функции и используйте его как переменную (без ()) следующим образом —
get paragraphs(): FormArray {
return this.blog.get("paragraphs") as FormArray
}
Затем исправьте массив абзацев с помощью цикла for, где данные представляют собой массив из API —
data.forEach(element => {
this.paragraphs.push(this.fb.group(element))
})
Смотрите рабочий пример здесь
Комментарии:
1. Большое вам спасибо, ваш код сработал. У меня была эта проблема в нескольких формах: ‘0
2. Добро пожаловать @DeybiTaboraPaz. Счастливого кодирования … 🙂