我正在使用ngMessages通过表单验证显示错误消息,这是有效的.
现在我的问题是,当我提交表单时,我想将类从有效(绿色边框)更改为正常状态,这只是输入上的css.此外,如果所有字段都有效,则文本消息应显示在表单已发送的表单上方,但它似乎不适用于$valid.
几秒钟后,消息消失.
我的代码
CSS
input { background-color: #fff; border: 1px solid darkgray; margin-top: 20px; width: 400px; height: 45px; padding: 0 10px; } .invalid-field { border: 1px solid red; } .valid-field { border: 1px solid green; } .error { color: red; } .sent { color: green; }
HTML /角
<form novalidate name="contactForm"> <div ng-messages="contactForm.$valid" ng-if="contactForm.$submitted"> <div ng-message="valid"> <span class="sent">Your message has been sent!</span> </div> </div> <input ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted,'valid-field': contactForm.nameField.$valid}" type="text" name="nameField" placeholder="Full name*" ng-model="contactName" minlength="2" required > <div ng-messages="contactForm.nameField.$error" ng-if="contactForm.$submitted || contactForm.nameField.$touched"> <div ng-message="required"> <span class="error">Name is required</span> </div> <div ng-message="minlength"> <span class="error">Name must be 2 characters long</span> </div> </div> <input ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted,'valid-field': contactForm.emailField.$valid}" type="email" name="emailField" placeholder="Email*" ng-model="contactEmail" required> <div ng-messages="contactForm.emailField.$error" ng-if="contactForm.$submitted || contactForm.emailField.$touched"> <div ng-message="required"><span class="error">Email is required</span></div> <div ng-message="email"><span class="error">Email is not valid</span></div> </div> <button class="send-btn" type="submit">Send form</button> </form>
解决方法
更新
我担心你不能直接做你需要的东西,因为如果你改变条件,就会有两种状态会相互冲突:
在第二种情况下,该字段将不显示有效字段绿色边框.
你应该做的是创建一个检查有效字段的函数,并在submit上执行它,然后为表单上的全局类设置一个标志为true,这将覆盖当前的有效/无效状态
//Validate States $scope.validateSuccessSubmit = function(){ if($scope.contactForm.nameField.$valid && $scope.contactForm.emailField.$valid && $scope.contactForm.$submitted) { $scope.formCompleted = true; } };
<!-- Form --> <form novalidate name="contactForm" ng-class="{'form-completed' : formCompleted}">
/*CSS*/ .form-completed input{ border: 1px solid darkgray; }
以前的错误答案:
只需在valid-field类上添加!$submitted条件即可
ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted,'valid-field': contactForm.nameField.$valid && !contactForm.$submitted}" //And ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted,'valid-field': contactForm.emailField.$valid && !contactForm.$submitted}"