CODEWITHSUNDEEP
javascripthtmlangularjsformsvalidation
forgottofly
forgottofly

Reputation: 2719

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

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>

Upvotes: 0

Views: 477

Answers (2)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41407

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

Upvotes: 2

tanmay
tanmay

Reputation: 7911

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

Upvotes: 1

Related Questions