我已经使用angularjs进行了表单验证。但是我遇到了一个问题，即页面加载时显示的错误消息。但是出现错误后将显示此消息。我想剩下的就是我已经使用指令设置了验证摘要。我能做些什么？
我的代码如下
<label>UserName</label>
<input type="text" class="form-control" name="UserName" ng-model="userVM.UserName" required ng-minlength="8" ng-maxlength="20" />
<div validation-message ng-show="customerForm.UserName.$error.required" class="error">
Username is required
</div>
指令像下面这样
NusPayApp.directive("validationSummary", function () {
return {
restrict: "A",
require: "^form",
template: "<div class='alert alert-warning'><a class='close' ng-click='toggleValidationSummary()'>×</a><h4 class='alert-heading'>Warning!</h4><li ng-repeat='(expression,message) in validationMessages'>{{message}}</li></ul></div>",
link: function (scope, element, attributes, controller) {
scope.validationMessages = {};
// Hooks up a watch using [ng-show] expression
controller.watchValidation = function (expression, message) {
// watch the return value from the scope.$eval(expression)
scope.$watch(function () { return scope.$eval(expression); }, function (isVisible) {
// check if the validation message exists
var containsMessage = scope.validationMessages.hasOwnProperty(expression);
// if the validation message doesn't exist and it should be visible, add it to the list
if (!containsMessage && isVisible) {
scope.validationMessages[expression] = message;
}
// if the validation message does exist and it shouldn't be visible, delete it
if (containsMessage && !isVisible) {
delete scope.validationMessages[expression];
}
});
};
}
};
});
让我帮忙给我建议。我需要确保在表单提交后会显示错误消息。
您可以在范围内添加新变量，以检查是否提交了表单。
$scope.isFormSubmit = false
然后，如果您的表单有错误，则将此标志更新为 true
if($scope.form.$valid)
{
//Submit your form
$scope.isFormSubmit = false
}
else
{
$scope.isFormSubmit = true
}
将您的HTML代码更新为
<div validation-message ng-show="customerForm.UserName.$error.required && isFormSubmit" class="error">
Username is required
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句