CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-controller
Sangram Singh
Sangram Singh

Reputation: 7191

prevent default on submit :- Angularjs

I want to prevent-default action of http-post to '/signUp' if e-mail is null upon filling form.

Controller Code:-

$scope.signUp = function() {

  if($scope.email = null);
    preventdefault;

}

html (jade) :-

form(name="input", action="/signUp", method="post")
  input(type="submit", value="submit")

Upvotes: 10

Views: 28340

Answers (1)

Dan Caragea
Dan Caragea

Reputation: 1794

When you have the action attribute specified for the form, angularjs will not do preventDefault. If you remove it and add ng-submit instead:

<form name="myForm" method="post" ng-submit="signUp(myForm)" novalidate>
    <input type="email" name="email" ng-model="newSignup.email" required>
    <button type="submit">sign up</button>
</form>

In this case the form will always have preventDefault and on submit your $scope.signUp() function will be called where you can proceed with an ajax post to the backend /signup or further validation. Note that by using proper validation attributes on your inputs (like type="email" and required), angularjs will perform some basic validation for you. You can have an extra ng-disabled="!myForm.$valid" on the submit button to keep the button disabled while the email is not correctly entered.

By using ng-model on the inputs like in my example, your scope will get a $scope.newSignup object which you can check in your signUp() function for further validation:

$scope.signUp = function(htmlForm) {
    if ($scope.newSignup.email !== '[email protected]') {
       return false;  // you should really show some info to the user
    }
    ...
}

Upvotes: 18

Related Questions