ng-invalid class been applied to formArrayName container

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. enter image description here

1 answer

  • answered 2018-05-16 05:21 Pengyy

    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.