What is the difference between
ng-required (form validation)?
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)
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!!
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="false", only the presence of the attribute matters (present means true) ! This is where Angular helps you out with