angularjs + nested ng-form + $invalid css for main ng-form.$invalid

Question

I need to set a css class on the outer most ng-form, if for any of the children, grand-children ng-form, $invalid is true.

I have a plunker to check with this problem.

http://plnkr.co/edit/CDyBbZs3GAUrEfBrap8G?p=preview

has anyone tried this? any pointers?

Thanks.

Sam P · Accepted Answer · 2014-05-30 11:32:45Z

1

Your CSS is incorrect.

You need to add border-style:

.error{
    border-color: red;
    border-width: 1px;
    border-style: solid;
}

http://plnkr.co/edit/d0Yijc8zkWOv4xfvcCcY?p=preview

The good news? Your understanding of Angular is correct! Angular supports what you want out of the box without any configuration.

In Angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well.

https://docs.angularjs.org/api/ng/directive/form

answered May 30, 2014 at 11:32

Sam P

1,84114 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darshan Joshi Over a year ago

hi, this solution works. how stupid of me! i think it's just Friday thing.

Samih · Accepted Answer · 2014-05-30 11:45:26Z

1

The form element gets an ng-invalid class as well so this works in the CSS - you don't even need to implement your own error class:

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

The border will go away when all the inputs are filled.

http://plnkr.co/edit/qbnFK2kLE3Al74EdMbBH?p=preview

edited May 30, 2014 at 11:45

answered May 30, 2014 at 11:30

Samih

1,0989 silver badges16 bronze badges

1 Comment

Darshan Joshi Over a year ago

I have accepted "@Sam P"'s answer mainly for 2 reasons: 1. He is first to reply. 2. answer is to the point. though your answer is also correct. Thanks!

Collectives™ on Stack Overflow

angularjs + nested ng-form + $invalid css for main ng-form.$invalid

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related