Angular form validation allows to submit even the mandatory field is void

Question

How can I disallow submit button to trigger any ng-click that is defined on it -be it from controller or HTML ng-click,when the mandatory field has not been filled. Note:I want to validate form only when the user clicks the submit botton enabling any ng-clicks defined on the submit button to trigger if the form is valid else vice versa

http://jsfiddle.net/L98x8zqw/

Below is my code:

<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]" ng-init="isSubmitted=false">
    <label class="control-label" for="email">Your email address</label>
    <div class="controls">
        <input type="email" name="email" ng-model="email" required />
        <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
    </div>
</div>
<div class="control-group">
  Ready to Submit :{{isSubmitted}}
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true;isSubmitted=true">Submit</button>

Sachila Ranawaka · Accepted Answer · 2017-03-23 06:57:22Z

2

Instead of ng click use ng-submit. it Will execute only when the form is valid unlike ng click.

Remove ng click and add ng-submit in form tag like this.

<form name="form" ng-app ng-submit="submitted=true;isSubmitted=true">

Demo

answered Mar 23, 2017 at 6:57

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tanmay · Accepted Answer · 2017-03-23 06:55:51Z

1

You can make use of formName.$invalid in ng-disabled on your submit button. Like this:

<button type="submit" ng-disabled="form.$invalid" 
        class="btn btn-primary btn-large" 
        ng-click="submitted=true;isSubmitted=true">
        Submit
</button>

Here's the working fiddle

answered Mar 23, 2017 at 6:55

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angular form validation allows to submit even the mandatory field is void

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related