I have reactive form for creating a recipe which has three controls:
- A title
- An FormArray of a FormGroup of ingredients which have two properties
- The name of the ingredient
- The amount taken
- A FormArray of steps
My problem is that whenever I add a FormControl or FormGroup to the FormArray the form's status is invalid even if I fill all the fields. There is a submit button which becomes disabled if the form is invalid.
My code:
<h1>Create a recipe</h1>
<form [formGroup]="recipe" (ngSubmit)="onSubmit()" autocomplete="off">
<div>
<mat-form-field appearance="outline" color="accent" hideRequiredMarker="true">
<mat-label>Name</mat-label>
<input formControlName="title" matInput required type="text" placeholder="ex. Oats Smoothie">
<mat-error>Name is <strong>required</strong></mat-error>
</mat-form-field>
</div>
<hr>
<div formArrayName="ingredients">
<div *ngFor="let control of ingredients.controls; index as i">
<div [formGroupName]="i">
<mat-form-field appearance="outline" color="accent" hideRequiredMarker="true">
<mat-label>Ingredient name</mat-label>
<input formControlName="name" matInput required placeholder="ex. Oats" type="text">
<mat-error>Ingredients are
<strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" color="accent" hideRequiredMarker="true">
<mat-label>Ingredient amount</mat-label>
<input formControlName="amount" matInput type="text" placeholder="ex. 1 cup">
<mat-error>Ingredients are
<strong>required</strong>
</mat-error>
<mat-icon matSuffix (click)="removeIngredient(i)" *ngIf="!(ingredients.controls.length == 1)">clear</mat-icon>
</mat-form-field>
</div>
</div>
<button type="button" mat-raised-button color="primary" (click)="addIngredient()">Add Ingredient</button>
</div>
<hr>
<div formArrayName="steps">
<mat-form-field *ngFor="let step of steps.controls; index as i" appearance="outline" color="accent"
hideRequiredMarker="true">
<mat-label>Steps</mat-label>
<textarea [formControlName]="i" type="text" matInput placeholder="ex. Take Oats"
cdkTextareaAutosize></textarea>
<mat-icon matSuffix (click)="removeStep(i)" *ngIf="!(steps.controls.length == 1)">clear</mat-icon>
<mat-error>Steps are <strong>required</strong></mat-error>
</mat-form-field>
<br>
<button type="button" (click)="addStep()" mat-raised-button color="primary">Add Step</button>
</div>
<br>
<button type="submit" [disabled]="!recipe.valid" mat-raised-button color="primary">Submit</button>
</form>
recipe: FormGroup | any;
constructor(private formBuilder: FormBuilder, private recipeService: RecipesService, private dialog: MatDialog, private router: Router) { }
ngOnInit(): void {
this.recipe = this.formBuilder.group({
title: ['', Validators.required],
ingredients: this.formBuilder.array([
this.formBuilder.group({
name: ['', Validators.required],
amount: ['', Validators.required]
})
]),
steps: this.formBuilder.array([
this.formBuilder.control('', Validators.required)
])
});
}
onSubmit() {
this.recipeService.createRecipe(this.recipe.value.title, this.recipe.value.ingredients, this.recipe.value.steps).subscribe();
}
get steps() {
return this.recipe.get('steps') as FormArray;
}
addStep() {
this.steps.push(this.formBuilder.control('', Validators.required));
}
get ingredients() {
return this.recipe.get('ingredients') as FormArray;
}
addIngredient() {
this.ingredients.push(this.formBuilder.group({ name: ['', Validators.required], amount: ['', Validators.required, Validators.pattern(/^\d\s?\w+/g)] }));
this.recipe.valid = this.recipe.valid ? !this.recipe.valid : this.recipe.valid;
}
this.recipe.updateValueAndValidity()
after adding a new item? – Ashot Aleqsanyan