Я создал форму, используя метод реактивной формы. Я создаю formGroup с 2 formControls на каждом нажатии кнопки.
При отправке формы я пытаюсь получить значения FormGroup, которая является FormArray, но значение не извлекается.
HTML-код, где я перебираю элементы управления и создаю необходимые formControls
<div class="row" formArrayName="ingredients">
<div class="col-md-12" >
<div class="row"
*ngFor="let ingredientControl of
recipeForm.get('ingredients').controls;
let index = index"
[formGroupName]="index"
style="margin-top: 10px;"
>
<div class="col-sm-8">
<input type="text"
class="form-control"
formControlName="ingredientName"
>
</div>
<div class="col-sm-3">
<input type="number"
class="form-control"
formControlName="ingredientAmount"
>
</div>
<div class="col-xs-2">
<button class="btn btn-danger" type="button"
(click)="onDeleteIngredient(index)"> X
</button>
</div>
</div>
</div>
</div>
.ts файл, в котором я пытаюсь получить значения FormControl
Я отправляю форму в шаблоне, используя (ngSubmit) = "onSubmit ()"
onSubmit(){
const newRecipe = new RecipeModel(
this.recipeForm.value['recipeName'],
this.recipeForm.value['imagePath'],
this.recipeForm.value['description'],
this.recipeForm.value['ingredients'],
);
this.recipeService.addNewRecipe(newRecipe);
}
Здесь this.recipeForm.value['ingredients']
возвращается пустым. Но при попытке напечатать значение FormArray, элемент управления имеет значение.
Я ожидаю, что форма возвратит ингридиенты ингридиентов и имен, чтобы я мог передать значение методу сервиса. Но я не получаю значение из формы.