У меня возникли проблемы с работой моего массива форм из групп форм.
Я хотел бы перебирать массив форм и отображать входные данные в каждой группе форм. Когда я вызываю addExercise()
, шаблон не отображает новую группу форм, которую я помещаю в массив форм. Также, когда я вызываю saveWorkout()
, строка console.info(this.workoutFormArray.value)
показывает, что значения из моих входов не отражаются.
тренировка.component.ts
workoutFormArray: FormArray;
ngOnInit() {
this.workoutFormArray = new FormArray([
new FormGroup({
exercise: new FormControl(''),
reps: new FormControl('')
})
]);
}
addExercise() {
this.workoutFormArray.push(
new FormGroup({
exercise: new FormControl(''),
reps: new FormControl(''),
})
);
}
saveWorkout() {
console.info(this.workoutFormArray.value);
}
тренировка.component.html
<ion-icon (click) = "addExercise()" name = "add" slot = "end"></ion-icon>
<div [formArrayName] = "workoutFormArray">
<div *ngFor = "let group of workoutFormArray.controls; let i = index">
<div [formGroupName] = "i">
<ion-select
placeholder = "Exercise"
formControlName = "group.controls.exercise"
(ionChange) = "saveWorkout()"
>
<ion-select-option [value] = "pushups"> Pushups </ion-select-option>
<ion-select-option [value] = "squats"> Squats </ion-select-option>
</ion-select>
<ion-input
type = "text"
formControlName = "group.controls.reps"
></ion-input>
</div>
<button type = "button" (click) = "saveWorkout()">Save</button>
</div>
</div>
formArray является корнем
Отмечено, сделано обновление моего ответа.
Обновлено: вы упомянули, что workoutFormArray
FormArray
является корнем формы, вы можете прочитать об этой проблеме в GitHub: Поддержка [formArray] без родителя [formGroup] # 30264.
<div [formGroup] = "$any(workoutFormArray)">
...
</div>
Проблема заключалась в том, что вы указали неправильный formControlName
во вложенном FormGroup
. Должен быть:
<ion-select
placeholder = "Exercise"
formControlName = "exercise"
(ionChange) = "saveWorkout()"
>
<ion-select-option value = "pushups"> Pushups </ion-select-option>
<ion-select-option value = "squats"> Squats </ion-select-option>
</ion-select>
<ion-input type = "text" formControlName = "reps"></ion-input>
Без приставки group.controls.
.
Хотел бы спросить, является ли ваш
formArray
корнем формы? Или естьFormGroup
, который обертываетFormArray
? Спасибо.