281

What is the difference between required and ng-required (form validation)?

Rubens Mariuzzo
  • 28,358
  • 27
  • 121
  • 148
TidharPeer
  • 3,777
  • 3
  • 21
  • 32

3 Answers3

425

AngularJS form elements look for the required attribute to perform validation functions. ng-required allows you to set the required attribute depending on a boolean test (for instance, only require field B - say, a student number - if the field A has a certain value - if you selected "student" as a choice)

As an example, <input required> and <input ng-required="true"> are essentially the same thing

If you are wondering why this is this way, (and not just make <input required="true"> or <input required="false">), it is due to the limitations of HTML - the required attribute has no associated value - its mere presence means (as per HTML standards) that the element is required - so angular needs a way to set/unset required value (required="false" would be invalid HTML)

Andrew Grimm
  • 78,473
  • 57
  • 200
  • 338
Tiago Roldão
  • 10,629
  • 3
  • 29
  • 28
  • How can I remove ng-required respectively? Because I tried some jquery methods with no success – themhz Sep 03 '13 at 19:27
  • 29
    I'm not sure I understand the question.. In practice, you never use ng-required="true", but rather ng-required="scopedVariable" or ng-required="scopeTruthTest()", and the value of the variable/function determines if the element is required. Never use jquery to mess with these things in an angular app, or you'll have unpredictable results! – Tiago Roldão Sep 03 '13 at 19:33
  • Its worth mentioning that ng-required displays a default tooltip style error message saying 'this field is required', which is not always desired. I'm looking for a way to turn it off – Adam Spence Mar 13 '14 at 12:12
  • 2
    It doesn't, really. Not sure, but I think what you're referring to is html5 validation, which is preformed automatically by most modern browsers. If you want to take control over this (disabling what the browser does) you can add the attribute novalidate: `
    `. Again, this is a html5 attribute, not related to angularJS.
     – Tiago Roldão Mar 14 '14 at 20:03
  • I would have expected that when `ng-required` points to a scope/controller variable, Angular monitors it for changes and sets the required attribute accordingly. While in the case of the simple HTML `required` attribute you don't have that kind of flexibility. No? And while we're on the same topic, what about `ng-attr-required`? Is it exactly the same as `ng-required`? – AsGoodAsItGets Apr 05 '17 at 15:03
78

I would like to make a addon for tiago's answer:

Suppose you're hiding element using ng-show and adding a required attribute on the same:

<div ng-show="false">
    <input required name="something" ng-model="name"/>
</div>

will throw an error something like :

An invalid form control with name='' is not focusable

This is because you just cannot impose required validation on hidden elements. Using ng-required makes it easier to conditionally apply required validation which is just awesome!!

Community
  • 1
  • 1
I_Debug_Everything
  • 3,776
  • 4
  • 36
  • 48
  • 13
    Definitely a good tip, and you can also use `ng-if` instead of `ng-show`/`ng-hide` to sidestep that potential issue. – jkjustjoshing Jun 30 '15 at 17:17
  • 1
    This should be the accepted answer. If you have hidden elements (ng-show="false"), there is a difference between ng-required="true" and just 'required' as described in this answer, and we got into hot water because of this difference. – Ivan Krivyakov Sep 08 '16 at 17:58
18

The HTML attribute required="required" is a statement telling the browser that this field is required in order for the form to be valid. (required="required" is the XHTML form, just using required is equivalent)

The Angular attribute ng-required="yourCondition" means 'isRequired(yourCondition)' and sets the HTML attribute dynamically for you depending on your condition.

Also note that the HTML version is confusing, it is not possible to write something conditional like required="true" or required="false", only the presence of the attribute matters (present means true) ! This is where Angular helps you out with ng-required.

Christophe Roussy
  • 16,299
  • 4
  • 85
  • 85