[英]hide default error message in AngularJs
如何在AngularJs中隐藏默认错误消息? 我试过display:none; 。 但是,它不会起作用。 我是AngularJS的新手。 我想隐藏默认错误消息,我想在用户onfocus输入文本框时显示错误消息。
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
<span class="error" ng-messages="contact_form.first_name.$error">
<span ng-message="required">First name should not be empty</span>
<span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
</span>
</p>
这就是您所需要的, contact_form.first_name.$dirty
用于检查字段是否已更改
<form name="contact_form" novalidate>
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
<span class="error" ng-messages="contact_form.first_name.$error">
<span ng-message="required" ng-show="contact_form.first_name.$error.required && contact_form.first_name.$dirty">First name should not be empty</span>
<span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
</span>
</p>
</form>
在您的控制器中,您可以创建一个变量来确定表单是否已被汇总:
app.controller('NameController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.formProcess = function(form) {
$scope.submitted = true;
// logic
}
}]);
比在你看来:
<form ng-submit="formProcess(form)">
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/>
<span class="error" ng-if="submitted" && ng-messages="contact_form.first_name.$error">
<span ng-message="required">First name should not be empty</span>
<span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span>
</span>
</p>
<p>
<button class="btn btn-secondary" type="submit">Send</button>
</p>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.