ng-invalid class 已应用于 formArrayName 容器

Question

我遵循了这个，但我遇到了一个问题。我正在使用 css 使表单控件的颜色在无效时变为红色。

.ng-invalid:not(form) {
    border:  1px solid red;
}

这是angular提供的css，之后当我运行在生产模式下，看到这个css被应用到整个formArray和红框出现在所有人面前。

这是它的样子。

Answer 1

FormArray当其中任何一项无效时，也将是invalid。您的 css 仅排除 form 但不排除 formArrayName 元素。

试试下面的例子

// excluding form and any elements with formarrayname attribute
.ng-invalid:not(form):not([formarrayname]) {
  border:  1px solid red;
}

如果您通过变量绑定到 formArrayName，formarrayname 将不会设置为 div，因此您需要排除 div。

// excluding form and div with ng-invalid
.ng-invalid:not(form):not(div) {
  border:  1px solid red;
}

ng-invalid class been applied to formArrayName container