如何从 FormArray 中查找包含角度错误的表单索引？

Posted 2023-03-25

【中文标题】如何从 FormArray 中查找包含角度错误的表单索引？

【英文标题】：How to find index of form from FormArray that contain error in angular?

【发布时间】：2021-11-13 20:43:05

【问题描述】：

我正在处理一种复杂的角度形式，我需要一些帮助。让我详细解释一下我的情况。

我有一个这样的 formArray：

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])
  )

上面的表格看起来像这样：

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" ,
]

我想从FormArray 中找到包含任何错误的表单索引，但我不知道该怎么做。一件重要的事情是，这种形式可以嵌套。像一个FormGroup 可以包含另一个FormGroup 或FormArray

任何人都知道它可以深度扫描整个表单并找到第一个错误位置的索引（表单索引），然后请在这里回答。我会欣赏你的想法。

谢谢。

【参考方案1】：

您可以遍历 formArray 控件并检查错误。像这样：

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

如果索引为-1，则表示所有控件都有效。