如果用户单击“提交”并且使用AngularJS表单字段为空,我想将输入字段设置为ng-invalid.我知道一个指令可以用于自定义表单验证,并使用$setValidity手动设置输入字段,但我不确定我需要一个指令来突出显示提交时的空/必填字段.任何帮助将不胜感激.谢谢.
<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,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";
}
解决方法
我不确定我是否完全遵循,但这样做你想要的吗？
Plunker：
http://plnkr.co/edit/L5qzEJRKkdGogsE7IzAr?p=preview
HTML：
<form name="signUpForm" ng-submit="submitUser()" novalidate>
<input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="e" ng-show="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<br>
<input type="text" name="email" ng-class="{ errorinput: submitted && signUpForm.email.$invalid }" 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="e" ng-show="submitted && signUpForm.email.$invalid">Please provide a valid email address</span>
<br>
<button type="submit">Submit</button>
</form>
使用Javascript：
$scope.submitUser = function() {
if ($scope.signUpForm.$valid) {
} else {
$scope.submitted = true;
}
}
