Set leere Eingabefeld ng-invalid auf "Absenden" mit AngularJS?
Will ich input-Feld ng-invalid, wenn ein Benutzer klickt auf senden und das Formular Felder leer sind mit AngularJS. Ich kenne eine Richtlinie kann verwendet werden, um benutzerdefinierte Formular-Validierung und die Verwendung von $setValidity manuell festlegen, das Eingabefeld aber ich bin mir nicht sicher, ich brauche eine Richtlinie, markieren Sie einfach die leer - /benötigten Felder auf "Absenden". Jegliche Hilfe würde sehr geschätzt werden. Danke.
Hier ist der code, mit der ich arbeite:
HTML -
<form name="SignUpForm ng-submit="submitUser()" novalidate>
<input type="text" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="error" ng-show="signUpForm.dob.$dirty && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<input type="text" name="email" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/" placeholder="Email" required />
<span class="error" ng-show="signUpForm.email.$dirty && signUpForm.email.$invalid">Please provide a valid email address</span>
<button type="submit">Submit</submit>
</form>
SASS/CSS
input {
&.ng-valid.ng-dirty {
color: #fff;
background-color: rgba(146, 253, 156, 0.5);
border-color: #92fd9c;
box-shadow: inset 2px 2px 2px #92fd9c;
}
&.ng-invalid.ng-dirty {
color: #850000;
background: rgba(254, 186, 186, 0.5);
border: 1px solid #850000;
}
AngularJS
$scope.submitUser = function() {
if ($scope.signUpForm.$valid) {
//Set form values & construct data to send
} else {
$scope.response = "Please fill in the required fields";
}
InformationsquelleAutor CodeEngie | 2014-03-01
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin mir nicht sicher, ob ich ganz Folgen, aber ist das tun, was Sie wollen?
Plunker:
http://plnkr.co/edit/L5qzEJRKkdGogsE7IzAr?p=preview
HTML:
Javascript:
InformationsquelleAutor Words Like Jared
Fügen Sie ein ng-Klasse in den speziellen Eingang wie textbox und eine ungültige Klasse auf HTML. Ich bin mit kendo-UI-also ich k-ungültig: true, wenn es überhaupt nicht den Zustand.
<input ng-class="{'k-invalid': (condition === false)}" required>
dies wird markieren Sie den input-Wert, sobald die Bedingung false ist.
InformationsquelleAutor Akshay Anand