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

Question

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

我有一个像这样的 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

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

谢谢。

Answer 1

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

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

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