Angular：为什么ng-blur之后ng-submit无法正常工作？

Question

In this plunk , if you click on the second field, then click on Submit, you will see that the form was not submitted (See that variable {{submitted}} is still false). 在此示例中，如果单击第二个字段，然后单击“提交”，您将看到表单尚未提交（请参见变量{{submitted}}仍然为false）。 ng-blur works fine, as the error message is displayed telling that the field is empty. ng-blur可以正常工作，因为会显示错误消息，提示您该字段为空。 Why ng-submit is not triggered? 为什么不提交ng-submit？

HTML 的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 Java脚本

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

The answer is that the button was pushed down when the error message appeared, so it was never really clicked. 答案是出现错误消息时按下了按钮，因此从未真正单击过该按钮。 Aligning the message to the field (ie the button stayed on the same place without moving and therefore it was clicked) with style="float:right" fixed the problem: 使用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 个解决方案

解决方案1
2 已采纳 2016-01-20 03:06:13

Angular：为什么ng-blur之后ng-submit无法正常工作？

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-01-20 03:06:13

解决方案1
2 已采纳 2016-01-20 03:06:13