ng-invalid类已应用于formArrayName容器

Question

我遵循了stackoverflow solution，但我遇到了一个问题。我使用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;
}

参考 http://localhost/srt/43534234/viral022018HD.MP4 和 demo 。