Question

In this plunk，如果您点击第二个字段，然后点击提交，您将看到表单未提交（请参阅变量{{submitted}}仍为假）。 ng-blur工作正常，因为显示的错误消息告诉该字段为空。为什么不触发ng-submit？

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"
           ng-minlength="2"
           ng-maxlength="5"
           required ng-blur="aaaBlur()" />
  </label>

  <div ng-show="showAaa || formSubmitted" ng-messages="myForm.aaa.$error" 
       style="color:red" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</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> <--- click here, then click Submit

  <div ng-show="showBbb || formSubmitted" ng-messages="myForm.bbb.$error" 
       style="color:green" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
  <br/>
  <button type="submit">Submit</button>
</form>

submitted:{{formSubmitted}} showAaa:{{showAaa}} showBbb:{{showBbb}}
</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

答案是当出现错误消息时按下按钮，因此从未真正点击过。使用style="float:right"将消息对齐到字段（即按钮停留在同一个位置而不会移动，因此被点击）修复了问题：

  <div style="float:right" ng-show="showAaa || formSubmitted" 
        ng-messages="myForm.aaa.$error" style="color:red" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>

Angular：为什么在ng-blur之后ng-submit不起作用？

1 个答案: