javascript - Angular blur validation preventing submission of separate form -
i have angular page form adding people, , button (outside form) submit list of people.
when user focuses on text input in form, , clicks submit list, validation error text input appears submit event never occurs.
an example of issue here: http://plnkr.co/edit/6z0uus
<div ng-controller="myctrl vm"> <form name="form1" novalidate=""> <input type="text" name="field1" ng-model="vm.name" required> <div ng-messages="form1.field1.$error" ng-if="form1.field1.$touched"> <label ng-message="required">name required</label> </div> <!-- form adds person list. i've not included code keep example simple <input type="submit" value="add person"> --> </form> <button ng-click="vm.submit()">submit list</button> </div> -
angular.module('myapp',[]) .controller('myctrl', function() { var vm = this; vm.name = ''; vm.submit = function () { alert('submitted'); }; }); to replicate:
- click on text input leave blank
- click submit
current behavior: "name required" appears validation. clicking 'submit' again displays 'submitted' alert.
expected behavior: "name required" appears validation and 'submitted' alert appears.
desired behavior: 'submitted' alert appears , add code vm.submit() hide 'name required' validation message it's not important when list submitted.
i've observed removing ng-messages block fixes issue, need show validation message. using more basic directive (ng-show) show validation message instead not help.
any insights i'm doing wrong, or workarounds achieve desired behavior, great!
[modified answer] : here working plunker : http://plnkr.co/edit/jcyri8xp4l3ftafabbls?p=preview
vm.preventdefaultifsubmitted = function($event){ if($event.relatedtarget.id == "submit"){ $event.stopimmediatepropagation(); } }; the idea $event when blur occurs , @ id of relatedtarget (which button in case) , if cancel $event, otherwise keep it.
that way if click anywhere validation message appears , if click on submit doesnt
Comments
Post a Comment