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