Comparing two fields and form.$valid

Question

What i want to realize is two input fields which i want to compare. If same, form has to be valid. Otherwise, invalid. This is the code:

<form name="form" class="css-form" novalidate>
E-mail: <input type="email" placeholder="student@university.com" 
             ng-model="user.email" name="uEmail" required/>
    <span class="error" ng-show="form.uEmail.$error.email">
        Not valid email!</span> 



Repeat e-mail: <input type="email" placeholder="student@university.com" 
            ng-model="repEmail"  required/>
    <span ng-if="user.email != repEmail">
        E-mail address are not same!
        </span> 
</form>

The problem is, although these fields are not same, it is true:

form.$valid == true

Thus, how can i change the validity of form so that it can be false if the input fields are not same (although they are valid e-mail addresses)

See this http://stackoverflow.com/questions/14012239/password-check-directive-in-angularjs Hope it will help you — Alexey, Nov 25 '13 at 12:43

score 1 · Accepted Answer · answered Nov 25 '13 at 16:52

1

You can use two methods here. You can either use angular-ui's validator directive (which is probably the easiest way to go), or you can write you own directive.

If you decide to use angular-ui's validator, it would look something like this:

<input name="email" required ng-model="user.email">
<input name="confirm_email"
    ui-validate=" '$value==email' "
    ui-validate-watch=" 'email' ">
<span ng-show="form.confirm_emal.$error.validator">Emails do not match!</span>

answered Nov 25 '13 at 16:52

codevinsky

1,273
1
9
18

I appreciate this being here, but I'm interested in writing a custom validator! I've made that a separate, specific question, would you be able to answer it? http://stackoverflow.com/questions/20982751/custom-form-validation-directive-to-compare-two-fields – asfallows Jan 07 '14 at 21:59

CodingNinja · Answer 2 · 2013-11-26T13:09:25.707

0

just change the type to email

Repeat e-mail: <input type="email" placeholder="student@university.com" 
            ng-model="repEmail"  required/>

edit:

instead of just using
form.$valid
use
form.$valid && user.email == repEmail

edited Nov 26 '13 at 13:09

answered Nov 25 '13 at 13:21

CodingNinja

801
9
17

it does not matter. What matter is just that they have to be equal. as you say, it might also be e-mail but the problem is not that – Asqan Nov 25 '13 at 13:26
for you to submit the page, there are 2 things
1.) form should be valid. which can be achieved from form.$valid, after setting repEmail type to be email
2.) email and repEmail are equal
so instead of just using
if(form.$valid) submit();
use if(form.$valid && $scope.user.email != $scope.repEmail) submit – CodingNinja Nov 26 '13 at 12:56

Comparing two fields and form.$valid

2 Answers2