如何从 FormArray 中找到包含 angular 错误的表单索引？

Question

我正在 angular 中处理一个复杂的表格，我需要一些帮助。让我详细解释一下我的情况。

我有一个这样的 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，则表示所有控件均有效。

如何从 FormArray 中找到包含 angular 错误的表单索引？

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

forms

validation

angular

angular-reactive-forms

formarray