Geek Answers Handbook

Angular lubrication check to prevent single form presentation

I have an Angular page with a form for adding people and a button (outside this form) to send a list of people.

When the user focuses on the text input in the form, and then clicks to submit the list, a validation error with text input appears, but the submit event never occurs.

An example of this problem is here: http://plnkr.co/edit/6Z0UUs

<div ng-controller="MyCtrl as 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 is required</label> </div> <!-- This form adds a person to a list. I've not included this code to keep the 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'); }; });

Repeat:

  • Click on text entry but leave blank
  • Click submit

Current behavior: "Name required" appears due to validation. Pressing "Submit" again displays a warning "sent".

Expected behavior: "Name required" appears after verification, and a "sent" warning appears.

Desired behavior: a “sent” warning appears, and I add some code to vm.submit () to hide the “Name required” confirmation message, since it is not important when sending the list.

I noticed that removing the ng-messages block fixes the problem, but I need to show a validation message. Using a more basic directive ( ng-show ) to display a validation message does not help.

Any understanding of what I am doing wrong, or workarounds to achieve the desired behavior, would be great!

+4
source share
2 answers

[Modified answer]: Here is the working plunker: http://plnkr.co/edit/JCyRi8xp4L3FtafABblS?p=preview

 vm.preventDefaultIfSubmitted = function($event){ if($event.relatedTarget.id == "submit"){ $event.stopImmediatePropagation(); } };

The idea is to get the $ event when the blur occurs, and then look at the identifier of the associated Target (which is your button in this case), and if that happens, you will cancel the $ event, otherwise you will save it.

Thus, if you click anywhere where your verification message appears, and if you click the Submit button,

+3
source

Can this help for form validation

 <form role="form" name="projectBriefFrm"> <div class="form-group"> <label for="project_title">Project Title <sup>*</sup> </label> <input ng-model="project.title" ng-required="true" type="text" class="form-control" name="title" placeholder="Untitled Project" /> <div class="row"> <span class="errorMessage" ng-show="!isProjectModelValid && projectBriefFrm.title.$invalid">Please provide title</span> </div> <div class="container" id="editor-title"> <label for="project_brief">Project Brief <sup>*</sup> </label> <div class="row" id="editor"> <div class="col-lg-12 nopadding"> <textarea ng-model="project.brief" name="brief" cult-editor ng-required="true"></textarea> </div> </div> </div> <div class="row"> <span class="errorMessage" ng-show="!isProjectModelValid && projectBriefFrm.brief.$invalid">Please provide project brief</span> </div> </div> </form>
+2
source

More articles:


All Articles