Discovering errors within a reactive form in Angular using a loop to iterate through the FormArray

Question

Discovering errors within a reactive form in Angular using a loop to iterate through the FormArray

I am currently utilizing Angular CLI version 16.2.1.

As I progress through a course, I am working with reactive forms. In a list of 'Recipes', I aim to include a Recipe with various inputs and a collection of ingredients. However, I am encountering errors every time I attempt to add an ingredient using a *ngFor loop of controls.

HTML

<div class="row">
    <div class="col-xs-12" formArrayName="ingredients">
        <div class="row" *ngFor="let ingredientCtrl of getControls(); let i = index" [formGroupName]="i" style="margin-top: 10px;">
            <div class="col-xs-8">
                <input type="text" class="form-control" formControlName="name">
            </div>
            <div class="col-xs-2">
                <input type="number" class="form-control" formControlName="amount">
            </div>
            <div class="col-xs-2">
                <button class="btn btn-danger">X</button>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-12">
                <button type="button" class="btn btn-success" (click)="onAddIngredient()">Add Ingredient</button>
            </div>
        </div>
    </div>
</div>

TypeScript (only code, no imports)

private initForm() {
    let recipeName = '';
    let recipeImagePath = '';
    let recipeDescription = '';
    let recipeIngredients = new FormArray([]);

    if(this.editMode) {
        const recipe = this.recipeService.getRecipe(this.id);
        recipeName = recipe.name;
        recipeImagePath = recipe.imagePath;
        recipeDescription = recipe.description;
        if(recipe['ingredients']) {
            for (const ingredient of recipe['ingredients']) {
                recipeIngredients.push(new FormGroup({
                    'name': new FormControl(ingredient.name, Validators.required),
                    'amount': new FormControl(ingredient.amount, [Validators.required, Validators.pattern(/^[1-9]+[0-9]*$/)])
                }));
            }
        }
    }

    this.recipeForm = new FormGroup({
        'name': new FormControl(recipeName, Validators.required),
        'imagePath': new FormControl(recipeImagePath, Validators.required),
        'description': new FormControl(recipeDescription, Validators.required),
        'ingredients': recipeIngredients
    })
}

getControls() {
    return (<FormArray>this.recipeForm.get('ingredients'))?.controls;
}

onAddIngredient() {
    (<FormArray>this.recipeForm.get('ingredients'))?.push({
        'name': new FormControl(null, Validators.required),
        'amount': new FormControl(null, [Validators.required, Validators.pattern(/^[1-9]+[0-9]*$/)])
    })
}

View and errors

https://i.sstatic.net/wNLYZ.png

Do you have any suggestions on how to resolve this issue?

angular typescript angular-reactive-forms formarray angular-validation

Answer 1

Answer №1

When working with the onAddIngredient method, it is important to note that the FormGroup instance should be added to the FormArray instead of adding an object directly.

onAddIngredient() {
  let fg: FormGroup<any> = new FormGroup({
    name: new FormControl(null, Validators.required),
    amount: new FormControl(null, [
      Validators.required,
      Validators.pattern(/^[1-9]+[0-9]*$/),
    ]),
  });

  (<FormArray>this.recipeForm.get('ingredients'))?.push(fg);
}

Check out the demo on StackBlitz

Answer 2

When working with the onAddIngredient method, it is important to note that the FormGroup instance should be added to the FormArray instead of adding an object directly.

onAddIngredient() {
  let fg: FormGroup<any> = new FormGroup({
    name: new FormControl(null, Validators.required),
    amount: new FormControl(null, [
      Validators.required,
      Validators.pattern(/^[1-9]+[0-9]*$/),
    ]),
  });

  (<FormArray>this.recipeForm.get('ingredients'))?.push(fg);
}

Check out the demo on StackBlitz

Answer 3

Answer №2

Avoid using the function getControls(), instead, utilize a getter method

get ingredientsFormArray()
{
    return (<FormArray>this.recipeForm.get('ingredients'))
}

and loop through

*ngFor="let ingredientCtrl of ingredientsFormArray.controls";

Furthermore, I recommend creating two separate functions:

Function that retrieves a formGroup for ingredients

ingredientFormGroup(data:any=null)
{
   data=data || {name:'',amount:''}
   return new FormGroup({
    name: new FormControl(data.name, Validators.required),
    amount: new FormControl(data.amount, [
      Validators.required,
      Validators.pattern(/^[1-9]+[0-9]*$/),
    ]),
  });
}

And a function that returns your formGroup

formGroup(data:any=null) {
  data=data || {name:'',imagePath:'',descriptions:'',ingredients:[]}
  return new FormGroup({
        'name': new FormControl(data.name, Validators.required),
        'imagePath': new FormControl(data.imagePath, Validators.required),
        'description': new FormControl(data.description, Validators.required),
        'ingredients': new FormArray(data.ingredients
               .map((x:any)=>this.ingredientFormGroup(x))
               )
    })
}

This allows you to write

if(this.editMode) {
    const recipe = this.recipeService.getRecipe(this.id);
    this.recipeForm=this.formGroup(recipe)
}
else
    this.recipeForm=this.formGroup()

And

//to add a new ingredient
this.ingredientsFormArray.push(this.ingredientFormGroup())

NOTE: It is possible that the previous code did not work because your this.recipeService.getRecipe() should return an observable, not an object (remember: "services return observables, we subscribe in components" and the correct way is

this.recipeService.getRecipe(this.id).subscribe((recipe:any)=>{
    this.recipeForm=this.formGroup(recipe)
 });

Answer 4

Avoid using the function getControls(), instead, utilize a getter method

get ingredientsFormArray()
{
    return (<FormArray>this.recipeForm.get('ingredients'))
}

and loop through

*ngFor="let ingredientCtrl of ingredientsFormArray.controls";

Furthermore, I recommend creating two separate functions:

Function that retrieves a formGroup for ingredients

ingredientFormGroup(data:any=null)
{
   data=data || {name:'',amount:''}
   return new FormGroup({
    name: new FormControl(data.name, Validators.required),
    amount: new FormControl(data.amount, [
      Validators.required,
      Validators.pattern(/^[1-9]+[0-9]*$/),
    ]),
  });
}

And a function that returns your formGroup

formGroup(data:any=null) {
  data=data || {name:'',imagePath:'',descriptions:'',ingredients:[]}
  return new FormGroup({
        'name': new FormControl(data.name, Validators.required),
        'imagePath': new FormControl(data.imagePath, Validators.required),
        'description': new FormControl(data.description, Validators.required),
        'ingredients': new FormArray(data.ingredients
               .map((x:any)=>this.ingredientFormGroup(x))
               )
    })
}

This allows you to write

if(this.editMode) {
    const recipe = this.recipeService.getRecipe(this.id);
    this.recipeForm=this.formGroup(recipe)
}
else
    this.recipeForm=this.formGroup()

And

//to add a new ingredient
this.ingredientsFormArray.push(this.ingredientFormGroup())

NOTE: It is possible that the previous code did not work because your this.recipeService.getRecipe() should return an observable, not an object (remember: "services return observables, we subscribe in components" and the correct way is

this.recipeService.getRecipe(this.id).subscribe((recipe:any)=>{
    this.recipeForm=this.formGroup(recipe)
 });

Discovering errors within a reactive form in Angular using a loop to iterate through the FormArray

Answer №1

Answer №2

Similar questions

Creating an interceptor to customize default repository methods in loopback4

The error message "Webpack is not applying the style from leaflet.css"

Angular Universal experiences issues with route functionality after page reloads

What is the proper way to access and modify the child component within a parent component?

Can the string literal type be implemented in an object interface?

The Vue application combined with TypeScript is displaying an empty white screen

Using Angular to dynamically modify the names of class members

Importing the Ivy library component in Angular by specifying the module path as a string

Debugging TypeScript code in VS Code by stepping into a library function within the Node.js debugger

Refresh a Google chart without having to reload the entire page

Issue: [ts] Unable to locate the term 'React'

When trying to set the focus on the first item in a list using HTML and Angular, the focus unexpectedly shifts to the second

Develop a type definition utilizing dotted paths from a recursive object model

Using TypeScript to Manipulate SVG Polyline Shapes

Javascript Library Issue: "Implicitly Declared Type 'Any' Error"

Include a link in the email body without displaying the URL

Retrieving the status of a checkbox using Angular's field binding feature

Mapping fields in Angular collectively

Retrieve request body/header variables in JWT strategy using Nest JS

How to Use ngFor to Create a Link for the Last Item in an Array in Angular 7