How to validate form when ng-click in AngularJS

Question

Any ideas on how I can make the html/browser validation work in the below code when also having to call a method. Also I can't use the submit type as a method because it's being used somewhere else. I need an alternative for the ng-click I suppose.

<input type="submit" ng-click="vm.submit1()" class="submitBtn" />

I guess I only want the ng-click to work only if the ng-submit has validated the fields.

Win · Accepted Answer · 2016-03-17 17:30:11Z

1

Inside submit1 function, could you check form.$valid ?

<input type="button" ng-click="vm.submit1(form)" class="submitBtn" />

function YourController() {

   var self = this;
   self.submit1 = function(form) {
      if (form.$valid) { // OR self.form.$valid
         ...
      }
   }

}

answered Mar 17, 2016 at 17:30

Win

62.4k13 gold badges106 silver badges190 bronze badges

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

1 Comment

Farrugia Over a year ago

Thank you this is exactly what I was after

rashfmnb · Accepted Answer · 2016-03-17 17:15:49Z

0

use it on button with the form name it will keep the button disabled until the form data will validated.

ng-disabled="frmLogin.$invalid"

here is the full code for normal login form for your help

<form  novalidate name="frmLogin" id="frmLogin" ng-submit="vm.doLogin()">

            <div class="form-group">
                <label>Email</label>
                <input class="form-control" type="email" name="txtusername" id="txtusername" ng-model="vm.newLogin.username"  required/>
                <span class="text-danger" ng-show="frmLogin.txtusername.$error.required">Email is required.</span>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input class="form-control" type="password" name="txtpassword" id="txtpassword" ng-model="vm.newLogin.password" required/>
                <span class="text-danger" ng-show="frmLogin.txtpassword.$error.required">Password is required.</span>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default" ng-disabled="frmLogin.$invalid">Login</button>

            </div>
            <div>
                Don't have a Account? <a href="#/Register"><strong>Register Now</strong></a>
            </div>
        </form>

answered Mar 17, 2016 at 17:15

rashfmnb

10.7k4 gold badges38 silver badges46 bronze badges

3 Comments

Farrugia Over a year ago

No the thing is that I want to show the browsers validation like the image and not my own validation only. My own is working thank you kind sir :)

rashfmnb Over a year ago

then try using required at element tag like <input class="form-control" type="password" name="txtpassword" id="txtpassword" required/>

Farrugia Over a year ago

Yes I also have that and still whenever I click on the button only the method is being thrown and the browsers validation no longer works

Collectives™ on Stack Overflow

How to validate form when ng-click in AngularJS

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related