AngularJS not validating email field in form

Question

I have the html below where I have a form that I want to submit to the AngularJS Controller.

<div class="newsletter color-1" id="subscribe" data-ng-controller="RegisterController">
  <form name="registerForm">
    <div class="col-md-6">
     <input type="email" placeholder="[email protected]" data-ng-model="userEmail" required class="subscribe">
   </div>
    <div class="col-md-2">
    <button data-ng-click="register()" class="btn btn-primary pull-right btn-block">Subsbcribe</button>
    </div>
  </form>
 </div>

And the controller is below

app.controller('RegisterController', function ($scope,dataFactory) {


$scope.users = dataFactory.getUsers();

$scope.register = function () {
    var userEmail = $scope.userEmail;
    dataFactory.insertUser(userEmail);
    $scope.userEmail = null;
    $scope.ThankYou = "Thank You!";
}
});

The problem is that no validation is taking place when I click the button. It is always routed to the controller although I do not supply a correct email. So every time I click the button I get the {{ThankYou}} variable displayed. Maybe I do not understand something.

no different than conventional form.. Without a name a field will never submit therefore doesn't need to be validated — charlietfl
– charlietfl, Commented Nov 5, 2013 at 13:38

Chandermani · Accepted Answer · 2013-11-05 10:04:16Z

1

AngularJS does not disable enable any functionality for form validations. What is does is, it makes the state of the form and its control in terms of validation available on the current scope. You are required to implement the behaviour yourself.

In your case if you need to check user email is valid your html input should have a name attribute like

<input type="email" placeholder="[email protected]" data-ng-model="userEmail" required class="subscribe" name='userEmail'>

Then on your controller you can check

$scope.registerForm.userEmail.$invalid property.

You can use the same property to disable the button on the form using ng-disabled

<button data-ng-click="register()" class="btn btn-primary pull-right btn-block" ng-disabled='registerForm.userEmail.$invalid'>Subsbcribe</button>

Basically the registerForm object is a ngFormController and userEmail is ngModelController. Please read the developer guide for forms

answered Nov 5, 2013 at 10:04

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

1 Comment

idipous Over a year ago

Thank you for your help and the link with the extra info. It worked as intended. I only had to add novalidate to the form to make it not display the html 5 errors.

Nicolas ABRIC · Accepted Answer · 2013-11-05 10:06:29Z

1

You are missing some part to achieve what you want. Normally you will need to add some code to enable disable the submit button base on the state of the form i.e valid/invalid. In your case this can be done like that :

<button data-ng-click="register()" class="btn btn-primary pull-right btn-block" ng-disabled="registerForm.$invalid">Subsbcribe</button>

Notice the ng-disabled="registerForm.$invalid".

You can as well provided inline feedback to the user with something like :

<input type="email" placeholder="[email protected]" data-ng-model="userEmail" required="" class="subscribe" name="userName"/>
<span ng-show="registerForm.userName.$error.required">Please enter a name</span>

Or with CSS like that :

input.ng-invalid-required {
  background-color: #FA787E;
}

You have a working plunker here

answered Nov 5, 2013 at 10:06

Nicolas ABRIC

4,93531 silver badges18 bronze badges

1 Comment

Kos Prov Over a year ago

If you ever need to access angular's FormController (the registerForm property with all the .$invalid, .$pristine etc properties), simply place data-ng-controller="RegisterController" on the form element. That way, your controller and the directive will share the same $scope and you'll have access to $scope.registerForm from within RegisterController code.

Collectives™ on Stack Overflow

AngularJS not validating email field in form

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related