ng-invalid class been applied to formArrayName container

Question

I followed this stackoverflow solution, but I am facing an issue. I am using css to make the color of the form control to red when it is invalid.

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

This is the css provided by angular and after this when i run in production mode, see that this css is applied to whole formArray and red box appears for all.

This is how it looks like.

Pengyy · Accepted Answer · 2018-05-16T05:56:34.403

2

FormArray will also be invalid when any item of it is invalid. Your css just excludes form but not formArrayName element.

Try with below example

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

If you bind to formArrayName via variable, the formarrayname will not be setted to div, so you will need to exclude div instead.

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

Refer demo and dynamic binding demo.

edited May 16 '18 at 05:56

answered May 16 '18 at 05:21

Pengyy

37,383
15
83
73

i am still getting the same, are you sure with the spelling for **formarrayname** – Yashdeep Sharma May 16 '18 at 05:25
@YashSharma See my updated answer. There is link which leads to the demo. – Pengyy May 16 '18 at 05:29
my form is dynamic and require
and not working for me but in your case it works
– Yashdeep Sharma May 16 '18 at 05:51
@YashSharma I have reproduced you error. For your case, `formarrayname` attribute is not reflected on `div`. You can try by `not(div)`. See my updated answer. – Pengyy May 16 '18 at 05:56

ng-invalid class been applied to formArrayName container

1 Answers1