web-dev-qa-db-fra.com

Quelle est la différence entre required et ng-required?

Quelle est la différence entre required et ng-required (validation de formulaire)?

275
TidharPeer

Les éléments de formulaire AngularJS recherchent l'attribut required pour exécuter les fonctions de validation. ng-required vous permet de définir l'attribut required en fonction d'un test booléen (par exemple, il suffit d'exiger le champ B - , par exemple un numéro d'étudiant - si le champ A a une certaine valeur - si vous avez sélectionné "étudiant" comme choix )

Par exemple, <input required> et <input ng-required="true"> sont essentiellement la même chose

Si vous vous demandez pourquoi c'est comme ça (et pas simplement faire <input required="true"> ou <input required="false">), c'est en raison des limitations de HTML - la required L'attribut n'a pas de valeur associée - sa simple présence signifie (conformément aux normes HTML) que l'élément est requis - donc angular a besoin d'un moyen de définir/désactiver la valeur requise (required="false" serait invalide HTML)

415
Tiago Roldão

Je voudrais faire un addon pour réponse de tiago :

Supposons que vous masquez un élément en utilisant ng-show et en ajoutant un attribut required sur le même élément:

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

va jeter une erreur quelque chose comme:

Un contrôle de formulaire non valide avec le nom = '' n'est pas focusable

En effet, vous ne pouvez pas imposer de validation required à hidden éléments. En utilisant ng-required, il est plus facile d'appliquer de façon conditionnelle la validation requise, ce qui est tout simplement génial!

77
I_Debug_Everything

Le attribut HTMLrequired="required" est une instruction indiquant au navigateur que ce champ est obligatoire pour que le formulaire soit valide. (required="required" est la forme XHTML, simplement utiliser required est équivalent)

Le attribut angulaireng-required="yourCondition" signifie "isRequired (votreCondition)" et définit l'attribut HTML dynamiquement en fonction de votre condition.

Notez également que la version HTML est déroutante, il est pas possible d'écrire quelque chose de conditionnel comme required="true" ou required="false", seule la présence de l'attribut compte (le présent signifie le vrai)! C’est là que Angular vous aide avec ng-required.

17
Christophe Roussy