How to find index of form from FormArray that contain error in angular?

Question

I am working with one complex form in angular and I need some help. let me explain my scenario in detail.

I have one formArray like this :

let slides = new FormArray([]);
slides.push(getNewSlide())
slides.push(getNewSlide())
slides.push(getNewSlide())
slides.push(getNewSlide())

function getNewSlide() {
  return new FormGroup({
    name: new FormControl("", [Validators.required]),
    image: new FormControl("", [Validators.required])
  })
}

Above form will look like this :

slides = [
  { name: "ram", image: "a.png" },
  { name: "shyam", image: "b.png" },
  { name: "", image: "c.png" },             <== here is error. name is required so index should be 2
  { name: "ghanshyam", image: "d.png" },
]

I want to find index of the form from FormArray that contain any error, But I don't know how to do that. One important thing is that, this form can be nested. like one FormGroup can contain another FormGroup or FormArray

anyone know about it to deep scan whole form and find index of first error place (index of form), then please answer here. I will appreciate your ideas.

Thank you.

Abdu Manas C A · Accepted Answer · 2021-09-20 05:33:16Z

7

You could loop through the formArray controls and check for errors. Like this:

findFirstInvalidControlInFormArray() {
    const index = (this.slides as FormArray).controls.findIndex(
      (control) => control.invalid
    );
    console.log(index);
  }

If the index is -1 it means, all controls are valid.

answered Sep 20, 2021 at 5:33

Abdu Manas C A

1,1491 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to find index of form from FormArray that contain error in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related