Quelle est la différence entre requis et ng requis?

278

Quelle est la différence entre requiredet ng-required(validation du formulaire)?

angularjs required TidharPeer
la source

Réponses:

421

Les éléments de formulaire AngularJS recherchent l' requiredattribut pour effectuer des fonctions de validation. ng-requiredvous permet de définir l' requiredattribut en fonction d'un test booléen (par exemple, ne nécessite que le champ B - disons, un numéro d'étudiant - si le champ A a une certaine valeur - si vous avez sélectionné "étudiant" comme choix )

À titre d'exemple, <input required>et <input ng-required="true">sont essentiellement la même chose

Si vous vous demandez pourquoi il en est ainsi (et pas seulement make <input required="true">or <input required="false">), c'est en raison des limites de HTML - l' requiredattribut n'a pas de valeur associée - sa simple présence signifie (selon les normes HTML) que l'élément est requis - donc angulaire a besoin d'un moyen de définir / annuler la valeur requise (ce required="false"serait du HTML non valide)

Tiago Roldão
la source
Comment puis-je supprimer ng-required respectivement? Parce que j'ai essayé quelques méthodes jquery sans succès
themhz
28
Je ne suis pas sûr de comprendre la question. En pratique, vous n'utilisez jamais ng-required = "true", mais plutôt ng-required = "scopedVariable" ou ng-required = "scopeTruthTest ()", et la valeur de la variable / fonction détermine si l'élément est requis. N'utilisez jamais jquery pour jouer avec ces choses dans une application angulaire, ou vous aurez des résultats imprévisibles!
Tiago Roldão
Il vaut la peine de mentionner que ng-required affiche un message d'erreur de style d'infobulle par défaut disant «ce champ est obligatoire», ce qui n'est pas toujours souhaité. Je cherche un moyen de l'éteindre
Adam Spence
2
Ce n'est pas vraiment le cas. Pas sûr, mais je pense que vous faites référence à la validation html5, qui est préformée automatiquement par la plupart des navigateurs modernes. Si vous voulez prendre le contrôle de cette (désactiver ce que le navigateur ne) , vous pouvez ajouter le novalidate attribut: <form method="post" action="/foo" novalidate>. Encore une fois, il s'agit d'un attribut html5, non lié à angularJS.
Tiago Roldão
Je m'attendais à ce que lorsque ng-requiredpointe vers une variable de portée / contrôleur, Angular la surveille pour les changements et définit l'attribut requis en conséquence. Alors que dans le cas de l' requiredattribut HTML simple, vous n'avez pas ce genre de flexibilité. Non? Et pendant que nous sommes sur le même sujet, qu'en est-il ng-attr-required? Est-ce exactement la même chose que ng-required?
AsGoodAsItGets
78

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

Supposons que vous cachez un élément en utilisant ng-showet en ajoutant un requiredattribut sur le même:

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

va lancer une erreur quelque chose comme:

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

En effet, vous ne pouvez tout simplement pas imposer de requiredvalidation sur les hiddenéléments. L'utilisation ng-requiredfacilite l' application conditionnelle de la validation requise, ce qui est tout simplement génial !!

I_Debug_Everything
la source
13
Certainement un bon conseil, et vous pouvez également utiliser ng-ifau lieu de ng-show/ ng-hidepour contourner ce problème potentiel.
jkjustjoshing
1
Ce devrait être la réponse acceptée. Si vous avez des éléments cachés (ng-show = "false"), il y a une différence entre ng-required = "true" et juste 'required' comme décrit dans cette réponse, et nous sommes entrés dans l'eau chaude à cause de cette différence.
Ivan Krivyakov, le
17

L' attribut HTML required="required" est une déclaration indiquant au navigateur que ce champ est obligatoire pour que le formulaire soit valide. ( required="required"est le formulaire XHTML, juste en utilisant requiredest équivalent)

L' attribut angulaire ng-required="yourCondition" signifie 'isRequired (yourCondition)' et définit l'attribut HTML dynamiquement pour vous en fonction de votre condition.

Notez également que la version HTML prête à confusion , il n'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 vrai)! C'est là que Angular vous aide ng-required.

Christophe Roussy
la source
Oui malheureusement le navigateur ne permet pas de mettre vrai / faux, probablement jugé trop technique ...
Christophe Roussy