Was ist der Unterschied zwischen erforderlich und ng-erforderlich?

278

Was ist der Unterschied zwischen requiredund ng-required(Formularvalidierung)?

angularjs required TidharPeer
quelle

Antworten:

420

AngularJS-Formularelemente suchen nach dem requiredAttribut, um Validierungsfunktionen auszuführen. ng-requiredMit dieser Option können Sie das requiredAttribut in Abhängigkeit von einem Booleschen Test festlegen (beispielsweise benötigen Sie nur Feld B - beispielsweise eine Schülernummer -, wenn das Feld A einen bestimmten Wert hat - wenn Sie "Schüler" als Auswahl ausgewählt haben. )

Als Beispiel <input required>und <input ng-required="true">sind im Wesentlichen das gleiche

Wenn Sie sich fragen, warum dies so ist (und nicht nur make <input required="true">oder <input required="false">), liegt dies an den Einschränkungen von HTML - das requiredAttribut hat keinen zugeordneten Wert - seine bloße Anwesenheit bedeutet (gemäß HTML-Standards), dass das Element erforderlich ist - Winkel benötigt also eine Möglichkeit, den erforderlichen Wert zu setzen / zu deaktivieren ( required="false"wäre ungültiges HTML)

Tiago Roldão
quelle

Wie kann ich ng-required entfernen? Weil ich einige jquery-Methoden ohne Erfolg

ausprobiert habe

Ich bin mir nicht sicher, ob ich die Frage verstehe. In der Praxis verwenden Sie niemals ng-required = "true", sondern ng-required = "scopedVariable" oder ng-required = "scopeTruthTest ()" und den Wert von Variable / Funktion bestimmt, ob das Element benötigt wird. Verwenden Sie niemals jquery, um mit diesen Dingen in einer eckigen App herumzuspielen, sonst erhalten Sie unvorhersehbare Ergebnisse!

Tiago Roldão

Erwähnenswert ist, dass ng-required eine Standardfehlermeldung im Tooltip-Stil mit der Meldung "Dieses Feld ist erforderlich" anzeigt, die nicht immer erwünscht ist. Ich suche nach einer Möglichkeit, es auszuschalten

Adam Spence

Wirklich nicht. Ich bin mir nicht sicher, aber ich denke, Sie beziehen sich auf die HTML5-Validierung, die von den meisten modernen Browsern automatisch durchgeführt wird. Wenn Sie die Kontrolle darüber übernehmen möchten (Deaktivieren der Funktionen des Browsers), können Sie das Attribut novalidate hinzufügen : <form method="post" action="/foo" novalidate>. Auch dies ist ein HTML5-Attribut, das nicht mit angleJS zusammenhängt.

Tiago Roldão

Ich hätte erwartet, dass ng-requiredAngular , wenn es auf eine Scope / Controller-Variable zeigt, diese auf Änderungen überwacht und das erforderliche Attribut entsprechend festlegt. Im Fall des einfachen HTML- requiredAttributs haben Sie diese Flexibilität nicht. Nein? Und während wir uns mit demselben Thema befassen, was ist dann ng-attr-required? Ist es genau das gleiche wie ng-required?

AsGoodAsItGets

Ich möchte ein Addon für Tiagos Antwort erstellen :

Angenommen, Sie verstecken ein Element, ng-showindem Sie ein requiredAttribut verwenden und hinzufügen :

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

wird einen Fehler auslösen wie:

Ein ungültiges Formularsteuerelement mit name = '' kann nicht fokussiert werden

Dies liegt daran, dass Sie Elemente einfach nicht requiredvalidieren können hidden. Die Verwendung ng-requirederleichtert die bedingte Anwendung der erforderlichen Validierung, was einfach fantastisch ist !!

I_Debug_Alles
quelle

Auf jeden Fall ein guter Tipp, und Sie können dieses potenzielle Problem auch ng-ifanstelle von ng-show/ verwenden ng-hide, um es zu umgehen.

jkjustjoshing

Dies sollte die akzeptierte Antwort sein. Wenn Sie versteckte Elemente haben (ng-show = "false"), gibt es einen Unterschied zwischen ng-required = "true" und nur "erforderlich", wie in dieser Antwort beschrieben, und wir sind aufgrund dieses Unterschieds in heißes Wasser geraten.

Ivan Krivyakov

Das HTML-Attribut required="required" ist eine Anweisung, die dem Browser mitteilt, dass dieses Feld erforderlich ist, damit das Formular gültig ist. ( required="required"ist das XHTML-Formular, nur die Verwendung requiredist äquivalent)

Das Angular-Attribut ng-required="yourCondition" bedeutet "isRequired (yourCondition)" und legt das HTML-Attribut abhängig von Ihrer Bedingung dynamisch für Sie fest.

Beachten Sie auch, dass die HTML-Version verwirrend ist , es nicht möglich ist, etwas Bedingtes wie required="true"oder zu schreiben required="false", nur das Vorhandensein des Attributs ist wichtig (vorhanden bedeutet wahr)! Hier hilft Ihnen Angular ng-required.

Christophe Roussy
quelle

Ja, leider erlaubt der Browser nicht, wahr / falsch zu setzen, was wahrscheinlich als zu technisch angesehen wird ...

Christophe Roussy