Angularjs email validation without required

Question

Title tells the problem shortly, I have a few email fields like so:

Email 1: <input type="email" name="email1" ng-model="emails.email1" />
<br />
Email 2: <input type="email" name="email2" ng-model="emails.email2" />

I am using following css to see the result:

input[type="email"].ng-invalid.ng-dirty {
    background-color: #FA787E;
  }

The problem is, validation doesn't fire unless I add required attribute. Inputs take classes "ng-valid ng-touched ng-dirty" when I input abc.

I don't want to put required attribute because I want them to be optional and be validated only if a user wants to fill an e-mail address. Is there a workaround for that?

Answer 1

In Angular 1.3 this is better supported. See the following page for details: http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html#html5-validators-and-parse-errors

Answer 2

You should be able to leverage the native angular validation methods:

For example with a form name of "form"

form.email1.$error.emails.email1
form.email2.$error.emails.email2

And the data methods:

{{!!form.$error.emails.email1}}
{{!!form.$error.emails.email2}}

From there, just mark the fields dirty and your styling should be applied.

Read more