Angularjs Angular.js验证。以编程方式设置表单字段属性
我正试图用angular建立一个表单验证系统,如下所示 当字段同时为$invalid&&$dirty时,将分配错误类 这对单个字段非常有效。下面是一个示例字段Angularjs Angular.js验证。以编程方式设置表单字段属性,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我正试图用angular建立一个表单验证系统,如下所示 当字段同时为$invalid&&$dirty时,将分配错误类 这对单个字段非常有效。下面是一个示例字段 <div class="control-group" ng-class="getErrorClasses(schoolSignup.first_name)"> <label class="control-label" for="first_name">First Name</label>
<div class="control-group" ng-class="getErrorClasses(schoolSignup.first_name)">
<label class="control-label" for="first_name">First Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="first_name" name="first_name" required ng-maxlength="30" ng-model="school.first_name">
<span class="help-inline" ng-show="showError(schoolSignup.first_name, 'required')">This field is required</span>
<span class="help-inline" ng-show="showError(schoolSignup.first_name, 'maxlength')">Maximum of 30 character allowed</span>
</div>
</div>
在错误帮助项中,ng show=“showError(schoolSignup.first_name,'required')”
定义为:
$scope.showError = function(ngModelController, error) {
return ngModelController.$dirty && ngModelController.$error[error];
};
这一切都很好
但是,我想做的是,如果用户单击submit按钮,并且所有必需的单个字段都无效,则在相应字段旁边显示required
错误消息
这需要根据此系统将所有单个字段设置为$dirty
,并将$error['required']
值设置为true
我在submit按钮上设置了一个指令,名为可以保存
,如下所示,它可以访问表单
<button class="btn btn-primary btn-large" type="submit" can-save="schoolSignup">Register</button>
除了使错误按需要显示外,这一切都有效
任何关于如何实现这一点的想法都将不胜感激。对于任何感兴趣的人,我已经修改了我的指令,以循环遍历错误,并将每个错误设置为
$dirty
,然后运行$rootScope.$digest()
:
<button class="btn btn-primary btn-large" type="submit" can-save="schoolSignup">Register</button>
.directive('canSave', function () {
return function (scope, element, attrs) {
var form = scope.$eval(attrs.canSave);
var valid = false;
element.click(function(){
if(!valid)
{
// show errors
return false;
}
return true;
});
scope.$watch(function() {
return form.$dirty && form.$valid;
}, function(value) {
valid = !!value;
});
}
});
.directive('canSave', function ($rootScope) {
return function (scope, element, attrs) {
var form = scope.$eval(attrs.canSave);
element.click(function () {
if(form.$dirty && form.$valid) {
return true;
} else {
// show errors
angular.forEach(form.$error, function (value, key) {
var type = form.$error[key];
angular.forEach(type, function (item) {
item.$dirty = true;
item.$pristine = false;
});
});
$rootScope.$digest();
return false;
}
});
}
});