2

When an input is required, ng-invalid-required is added as a class and required="required" is being set as an attribute.

When an input is not required, ng-valid-required is added as a class and no required attribute is being set as an attribute.

(A good way to add required to an input, is through setting a variable on the scope and using ng-required as per Plunkr.)

Here is Plunkr example with one required input and one non required input

What I am struggling with is trying to find specific documentation on the ng-valid-required. I feel slightly confused as the why there's a class with ng-xx-required, when the input is not required.

Thanks in advance for your time. ROCK ON!

Mag Leahy
  • 59
  • 8
  • could you create plunkr with a problem? – Pankaj Parkar Jun 04 '15 at 12:19
  • In your plunkr, using Firefox, I get **ng-valid-required** on the second input box, and ng-invalid-required on the first. This looks correct, what browser are you using? – Mark Hughes Jun 04 '15 at 16:52
  • 1
    @MarkHughes I get the same on Chrome. – Ram Tobolski Jun 04 '15 at 17:18
  • The question is - am I being a massive idiot? `ng-invalid-required` for the required input and `ng-valid-required` for the non required - I can't find documentation on the exact meanings on these. I would have thought `ng-xxx-required` would only be added when the field is required. I can't find any good documentation on this specific required class meaning. – Mag Leahy Jun 05 '15 at 10:37

1 Answers1

0

It is actually working this solution: 

<input type="text" name="userName" ng-model="user.name" ng-required="required">

The problem is pearhaps in variable definition see plunker here: http://plnkr.co/edit/DBcwDeuKJq8Zp1b3daOV?p=preview

Ismapro
  • 130
  • 6
  • I'm not sure this is correct (whether it works or not) - required="false" is not valid HTML as per [this answer](http://stackoverflow.com/a/16648851/789529) – Mark Hughes Jun 04 '15 at 12:53
  • I played with the plunker and yes you are right it is not changing anything actually. ng-required=false is sufficent. – Ismapro Jun 04 '15 at 14:01
  • 1
    The question is asking to set ng-required from a scope variable though, so think this doesn't answer the problem. – Mark Hughes Jun 04 '15 at 14:02
  • 1
    and replacing boolean by a variable defined in controller still work also. – Ismapro Jun 04 '15 at 14:04
  • I updated a new version of plunker. I think the problem is scope definition in Mag code snippet. – Ismapro Jun 04 '15 at 14:11
  • 1
    @Mag I forked my plunk with the exact input date and added a button on it. i only get a **ng-valid-required** when required=false and **ng-invalid-required** when required=true – Ismapro Jun 05 '15 at 07:52
  • Thanks, you helped me to see I was missing the subtlety difference in my speed reading between ```ng-valid-required``` and ```ng-invalid-required```. Would still love to see specific documentation on these. – Mag Leahy Jun 05 '15 at 09:59