![为什么我的字段无效]( "为什么我的字段无效")
本文介绍了AngularJS:为什么我的字段无效?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个自定义密码验证
app.directive('userPassword', function() {返回 {限制:'A'，要求:'ngModel'，链接:函数(范围，榆树，属性，ctrl){ctrl.$validators.myValidator = 函数(模型值，视图值){var msg = helper.validation.user.localPassword(modelValue)ctrl.$error.message = msgctrl.required = helper.validation.user.localPassword()返回 ！留言}}}})
这是我的密码html:
<label for="signup_password">密码:</label><input ng-model="password" type="password" name="password" id="signup_password"占位符="输入密码"用户密码 ng-required="signupForm.password.required" class="my-form-control">
当我输入abcd时，指令link函数的返回值为true.当我检查元素时，我得到了这个:
class="my-form-control ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-valid-my-validator ng-touched"
如您所见，required 和 my-validator 都是有效的(ng-valid-required 和 ng-valid-my-validator.为什么我的班级还是ng-invalid?
当我检查整个表单时，它是 ng-valid
更新.如果我使用 scope 而不是 ctrl，它就可以工作.
ctrl.$validators.myValidator = function(modelValue, viewValue) {var msg = helper.validation.user.localUsername(modelValue)scope.userUsername = {}scope.userUsername.message = msgscope.userUsername.required = helper.validation.user.localUsername()返回 ！留言};
在 HTML 中
<div ng-show="signinForm.username.$touched && userUsername.message">{{userUsername.message}}
但我不想污染控制器范围.如何使用 ctrl 而不是 scope
您可以将以下样式添加到标题中.输入字段始终为红色.
http://plnkr.co/edit/deAQoIw4KfekIh3ZOt1j?p=preview
input.ng-invalid.ng-touched {背景颜色:#FA787E；}input.ng-valid.ng-touched {背景色:#78FA89；}input.ng-pending.ng-touched {背景颜色:#b3933b；}</风格>
解决方案
这是我对 username 字段的实现.密码应该差不多.
var def = $q.defer()ctrl.message = '检查服务器的用户名是否唯一'restService.checkIsUsernameUnique(modelValue, function() {ctrl.message = '确定它的唯一用户名'def.resolve()}, 函数(错误){ctrl.message = err.messagedef.reject()})返回 def.promise;
在 HTML 中
{{form.username.message}}
简而言之，如果你想把非错误信息也放在ctrl.$error中，不要把信息放在
I have a custom validation for password
app.directive('userPassword', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.myValidator = function(modelValue, viewValue) {
var msg = helper.validation.user.localPassword(modelValue)
ctrl.$error.message = msg
ctrl.required = helper.validation.user.localPassword()
return ! msg
}
}
}
})
This is my password html:
<div class="my-form-group">
<label for="signup_password">Password:</label>
<input ng-model="password" type="password" name="password" id="signup_password"
placeholder="Enter Password"
user-password ng-required="signupForm.password.required" class="my-form-control">
</div>
When I enter abcd, the returned value of the directive link function is true. When I inspect the element, I got this:
class="my-form-control ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-valid-my-validator ng-touched"
As you can see, both required and my-validator is valid (ng-valid-required and ng-valid-my-validator. Why is my class still ng-invalid?
When I inspect the entire form, it is ng-valid
Update. If I use scope instead of ctrl, it's working.
ctrl.$validators.myValidator = function(modelValue, viewValue) {
var msg = helper.validation.user.localUsername(modelValue)
scope.userUsername = {}
scope.userUsername.message = msg
scope.userUsername.required = helper.validation.user.localUsername()
return ! msg
};
And in HTML
<input ng-model="username" type="text" name="username" id="signin_username"
placeholder="Enter Username"
user-username ng-required="userUsername.required" class="my-form-control">
<div ng-show="signinForm.username.$touched && userUsername.message">
{{userUsername.message}}
</div>
But I dont want to pollute the controller scope. How can I use ctrl instead of scope
Edit:You can add the following style to the header. The input field is always red.
http://plnkr.co/edit/deAQoIw4KfekIh3ZOt1j?p=preview
<style>
input.ng-invalid.ng-touched {
background-color: #FA787E;
}
input.ng-valid.ng-touched {
background-color: #78FA89;
}
input.ng-pending.ng-touched {
background-color: #b3933b;
}
</style>
解决方案
This is my implementation for username field. Password should be pretty much the same.
var def = $q.defer()
ctrl.message = 'checking the server for username unique'
restService.checkIsUsernameUnique(modelValue, function() {
ctrl.message = 'ok its unique username'
def.resolve()
}, function(err) {
ctrl.message = err.message
def.reject()
})
return def.promise;
And in HTML
<div ng-show="form.username.$touched && form.username.message">
{{form.username.message}}
</div>
In short, do not put message inside ctrl.$error if you want to put non-error message as well
这篇关于AngularJS:为什么我的字段无效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！