2016-01-20 9 views
1

In this plunk, если вы нажмете на второе поле, затем нажмите «Отправить», вы увидите, что форма не была отправлена ​​(см., Что переменная {{submitted}} по-прежнему ложна). ng-blur работает нормально, поскольку отображается сообщение об ошибке, указывающее, что поле пуст. Почему ng-submit не запускается?Угловая: почему ng-submit после ng-blur не работает?

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; 
    }; 

}); 
+2

проблема, как представляется, что, когда вы * нажмите * на кнопку, событие 'mousedown' вызывает активацию« размытия », которая перемещает кнопку в сторону, заставляя события« mouseup »и« click »не регистрироваться как находящиеся на кнопке, поэтому' ng-submit' никогда не получает событие 'click'. – Claies

ответ

2

Ответ в том, что кнопка была нажата вниз, когда появилось сообщение об ошибке, поэтому она никогда не была действительно нажата. Выравнивание сообщения в поле (т.е. кнопка осталась на том же месте, не двигаясь, и поэтому она была нажата) с 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> 
Смежные вопросы