AngularJS：隐藏ng-message直到点击表单提交按钮
发布时间：2020-12-17 17:07:54 所属栏目：安全 来源：网络整理
导读：这是在AngularJS(1.x)中使用ng-messages的典型示例： form name="demoForm" input name="amount" type="number" ng-model="amount" max="100" required div ng-messages="demoForm.amount.$error" div ng-message="required"This field is required/div /div
|
这是在AngularJS(1.x)中使用ng-messages的典型示例：
<form name="demoForm">
<input name="amount" type="number" ng-model="amount" max="100" required>
<div ng-messages="demoForm.amount.$error">
<div ng-message="required">This field is required</div>
</div>
<button type="submit">test submit</button>
</form>
见：http://jsfiddle.net/11en8swy/3/ 我现在想要更改此示例,以便仅在触摸($触摸)字段或用户点击提交按钮时显示“此字段是必需的”错误. 我无法在表单上使用ng-submitted类,因为验证错误会阻止提交表单. 我该怎么做？ 谢谢 解决方法
您可以使用ng-show执行此操作：
<div ng-messages="demoForm.amount.$error" ng-show="demoForm.amount.$touched">
<div ng-message="required">This field is required</div>
</div>
并使用自定义指令.查看工作演示： var app = angular.module('app',['ngMessages']);
app.controller('mainCtrl',function($scope) {
});
app.directive('hasFocus',function($timeout) {
return {
restrict: 'A',require: 'ngModel',link: function(scope,element,attr,ctrl) {
element.on('focus',function() {
$timeout(function() {
ctrl.hasFocusFoo = true;
})
});
element.on('blur',function() {
$timeout(function() {
ctrl.hasFocusFoo = false;
})
});
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>
<body ng-app="app" ng-controller="mainCtrl">
<form name="demoForm">
<input name="amount" type="number" ng-model="amount" max="100" required has-focus>
<div ng-messages="demoForm.amount.$error" ng-show="demoForm.amount.$touched || demoForm.amount.hasFocusFoo">
<div ng-message="required">This field is required</div>
</div>
<button type="submit">test submit</button>
</form>
</body>
该指令基本上是在ngModel控制器上设置另一个hasFocusFoo字段,然后我们可以轻松地使用该指令. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |