Question

In this plunk我有一个包含两个字段的表单，每个字段都使用ngMessage进行验证，当用户选中字段或提交表单时，会显示错误消息。

问题在于，如果显示消息然后隐藏（因为问题已修复），仍会显示边框。

尝试跳出某个字段，然后输入一个值，您只会在错误消息中看到边框。

如何摆脱这些边界？

HTML

<body ng-app="ngMessagesExample" ng-controller="ctl">
  <form name="myForm" novalidate ng-submit="submitForm()">
  <label>
    Enter Aaa:
    <input type="text"
           name="aaa"
           ng-model="aaa"
           required ng-blur="aaaBlur()" />
  </label>

  <div ng-show="showAaa || formSubmitted" 
      ng-messages="myForm.aaa.$error" 
      style="color:red;background-color:yellow;border:1px solid brown">
    <div ng-message="required">You did not enter a field</div>
  </div>

  <br/>
  <label>
    Enter Bbb:
    <input type="text"
           name="bbb"
           ng-model="bbb"
           ng-minlength="2"
           ng-maxlength="5"
           required ng-blur="bbbBlur()" />
  </label> 
<br/><br/>
  <div ng-show="showBbb || formSubmitted" ng-messages="myForm.bbb.$error" 
  style="color:red;background-color:yellow;border:1px solid brown">
    <div ng-message="required">You did not enter a field</div>
  </div>
  <br/>
  <button style="float:left" type="submit">Submit</button>
</form>

</body>

的Javascript

var app = angular.module('ngMessagesExample', ['ngMessages']);
app.controller('ctl', function ($scope) {

  $scope.formSubmitted = false;
  $scope.showAaa = false;
  $scope.showBbb = false;

  $scope.submitForm = function() {
    $scope.formSubmitted = true;

  };


   $scope.aaaBlur = function() {
    $scope.showAaa = true;
  };

   $scope.bbbBlur = function() {
    $scope.showBbb = true;
  };


});

Answer 1

这是因为你展示了div（showAaa=true），但没有内容。解？不要显示div。：）

<div ng-show="!myForm.aaa.$valid && (showAaa || formSubmitted)"

Answer 2

你在哪个领域有问题？两者还是只有第二人？

我看到在第二个字段中你修正了最小和最大长度。如果它们不对，你没有任何消息来处理它们，但是你的字段会出错，所以你最终会得到红色边框而没有消息。

顺便说一句：您可以使用[formName]。[fieldName]。$触及而不是使用您的原生onblur。

在ngMessage中摆脱讨厌的边界

2 个答案: