AngularJS：隐藏ng-message直到点击表单提交按钮

2023年11月4日 210次阅读

这是在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字段,然后我们可以轻松地使用该指令.

点赞