关于angular：ng-invalid类已应用于formArrayName容器

ng-invalid class been applied to formArrayName container

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

1
2
3

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

这是由angular提供的css，在此之后，当我在生产模式下运行时，请参见将此css应用于整个formArray并为所有对象显示红色框。

这就是它的样子。
enter image description here

当FormArray的任何一项无效时，它也将是invalid。您的CSS仅排除form元素，但不包括formArrayName元素。

尝试以下示例

1
2
3
4

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

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

1
2
3
4

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

请参阅演示和动态绑定演示。