我需要创建一个验证指令,以自动显示每个输入的所有输入错误.
此验证指令应显示当前所有错误,并在用户输入时自动更新错误列表.
此验证指令应显示当前所有错误,并在用户输入时自动更新错误列表.
如果输入是脏的,我需要显示输入的所有错误,而不是空且无效.我需要将所有错误添加到该输入元素附近的html元素中.
例如,如果输入有type =“email”和ng-minlength =“5”,用户键入“abc”,我需要在此输入附近显示此类错误：“无效的电子邮件;请输入至少5个字符;’
例如,如果input具有type =“number”attr和min =“200”,min-model =“minnumber”,并且minnumber模型设置为“300”,用户键入“100”,则需要在此输入附近显示此类错误：请输入最少500个;应该大于Min Number;
另外,如果更新相关模型(min-model param),我还需要更新上一个示例中所有输入的错误消息.
var app = angular.module('app',[]);
app.controller('appCtrl',function ($scope) {
});
app.directive('validate',function () {
return {
restrict: 'A',require: 'ngModel',// require: '^form',link: function (scope,element,attrs,ctrl) {
console.log('======================');
console.log(scope);
console.log(element);
console.log(attrs);
console.log(ctrl);
console.log(scope.form.$error);
angular.forEach(scope.form.$error,function (value,key) {
console.log('scope.form.$error = ' + key + ': ' + value);
console.log(value);
});
}
};
});
app.directive('positiveInteger',ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
var INTEGER_REGEXP = /^\d+$/;
if (INTEGER_REGEXP.test(viewValue)) { // it is valid
ctrl.$setValidity('positiveInteger',true);
return viewValue;
} else { // it is invalid,return undefined (no model update)
ctrl.$setValidity('positiveInteger',false);
return undefined;
}
});
}
};
});
app.directive('positiveFloat',ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
var FLOAT_REGEXP = /^(?:[1-9]\d*|0)?(?:\.\d+)?$/;
if (FLOAT_REGEXP.test(viewValue)) { // it is valid
ctrl.$setValidity('positiveInteger',false);
return undefined;
}
});
}
};
});
app.directive('minModel',ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (viewValue > scope[attrs.minModel]) { // it is valid
ctrl.$setValidity('minModel',return undefined (no model update)
ctrl.$setValidity('minModel',false);
return undefined;
}
});
}
};
});
你能帮助做出这个验证指令吗？
或者你可以指出我正确的方向吗？
解决方法
看看ng-messages
directive.它相当优雅.例：
<form name="myForm"> <input type="text" ng-model="field" name="myField" required minlength="5" /> <div ng-messages="myForm.myField.$error"> <div ng-message="required">You did not enter a field</div> <div ng-message="minlength">The value entered is too short</div> </div> </form>
