Remove field errors when resetting a form with a FormArray

Question

In my Angualar application I have a form with several text fields like order ID and order date. My form also has a FormArray where each element is a FormGroup representing a row of fields. This form array has 1 FormGroup at startup and more can be addedby clicking on a button. After I submit my form I want to reset the form after getting a succesful response from posting data to a REST service. My reset code form is as follows.:

resetItems(): void {
  this.orderForm.reset();
  this.clearErrorsFromFormGroup(this.orderForm);
  let items = this.orderForm.get('items') as FormArray;
  items.controls = [];
  this.addItem();
  this.clearErrorsFromFormGroup(items.at(0) as FormGroup);


}

  private clearErrorsFromFormGroup(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
    });
  }

When executing the above the top level fields like order Id and Order date are reset and are not highlighted red as I have removed the errors. I want to set my form array to be the same way it was at start up with 1 element. My code clears the form array and adds a rowData Element. I then clear the errors for the rowData FormGroup. On the UI The fields for this rowData are all cleared but theys are highlighted red even though I have cleared the errors. Can anyone help please?

I have included a StackBlitz link to demonstrate this at https://stackblitz.com/edit/angular-8qjphu

Sorry about that @brijmcq. I have now. updated the link with the correct one. — sachman
– sachman, Commented May 9, 2020 at 3:07

brijmcq · Accepted Answer · 2020-05-09 08:43:59Z

The items is a FormArray and the way you clear your controls won't work.

Check this code

 Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
    });

Imagine that you hit the items key here

formGroup.controls['item'] // this is a FormArray and 
// not FormControl so setErrors(null) won't work here

One way to fix this is to check for the instance of FormArray then iterate on the controls field and you can use the clearValidators and updateValueAndValidty functions.

   if (formGroup.controls[key] instanceof FormArray) {
         const control = formGroup.get(key) as FormArray;
        for (let i = 0; i < control.controls.length; i++) {
          const formGroup = control.controls[i] as FormGroup;
          Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            control.clearValidators();
            control.updateValueAndValidity();
          });
        }
      }

Here's a stackblitz demo: https://stackblitz.com/edit/angular-f7pflm?file=src%2Fapp%2Fapp.component.ts

Here's how your clearErrorsFromFormGroup woud look like now

private clearErrorsFromFormGroup(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
       if (formGroup.controls[key] instanceof FormArray) {
         const control = formGroup.get(key) as FormArray;
        for (let i = 0; i < control.controls.length; i++) {
          const formGroup = control.controls[i] as FormGroup;
          console.log('control', control);
          Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            control.clearValidators();
            control.updateValueAndValidity();
          });
        }
      }

    });
  }

Tomasz Janiszewski · Accepted Answer · 2020-05-08 21:29:37Z

0

Try using formGroup.updateValueAndValidity() method after reset

answered May 8, 2020 at 21:29

Tomasz Janiszewski

414 bronze badges

Collectives™ on Stack Overflow

Remove field errors when resetting a form with a FormArray

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related