Comparing two input values in a form validation with AngularJS

Question

I am trying to do a form validation using AngularJS  I am especially interested in comparing two values  I want the user to confirm some data he entered before he continues  Lets say I have the code below    lt p gt      Email  lt input type  email  name  email1  ng-model  emailReg  gt      Repeat Email  lt input type  email  name  email2  ng-model  emailReg2  gt   lt p gt    and then I can use validation with    lt span ng-show  registerForm email1  error required  gt Required  lt  span gt   lt span ng-show  registerForm email1  error email  gt Not valid email  lt  span gt   lt span ng-show  emailReg     emailReg2  gt Emails have to match  lt  span gt    lt -- see this line   registerForm  valid will react correctly as to the text in inputs except I do not know how to use comparison within this validation to force the emails to be the same before allowing the user to submit the form   I would love to have a solution without custom directives  but if this can t be achieved without it I will deal with it  Here is an answer that addresses similar issue with a  custom directive   Any help appreciated  thank you

User · Accepted Answer

One way to achieve this is with a custom directive. Here's an example using a custom directive (ng-match in this case):

<p>Email:<input type="email" name="email1" ng-model="emailReg">
Repeat Email:<input type="email" name="email2" ng-model="emailReg2" ng-match="emailReg"></p>

<span data-ng-show="myForm.emailReg2.$error.match">Emails have to match!</span>

NOTE: It's not generally recommended to use ng- as a prefix for a custom directive because it may conflict with an official AngularJS directive.

Update

It's also possible to get this functionality without using a custom directive:

HTML

<button ng-click="add()></button>
<span ng-show="IsMatch">Emails have to match!</span>

Controller

$scope.add = function() {
  if ($scope.emailReg != $scope.emailReg2) {
    $scope.IsMatch=true;
    return false;
  }
  $scope.IsMatch=false;
}

User · Answer

I ve modified method of Chandermani to be compatible with Angularjs 1 3 and upper  Migrated from  parsers to  asyncValidators   module directive  customValidator    function          return           restrict   A           require   ngModel           scope    validateFunction    amp              link  function  scope  elm  attr  ngModelCtrl                ngModelCtrl  asyncValidators attr customValidator    function  modelValue  viewValue                    return new Promise function  resolve  reject                        var result   scope validateFunction    value   viewValue                         if  result    result     false                            if  result then                                result then function  data                For promise type result object                                 if  data                                      resolve                                    else                                     reject                                   function  error                                    reject                                                                                      else                               if  result                                  resolve                                else                                 reject                                return                                                                      reject                                                               Usage is the same

User · Answer

trainosais - you are right  validation should be done on a directive level  It s clean  modular and allows for reusability of code  When you have basic validation like that in a controller you have write it over and over again for different forms  That s super anti-dry   I had a similar problem recently and sorted it out with a simple directive  which plugs in to the parsers pipeline  therefore stays consistent with Angular architecture  Chaining validators makes it very easy to reuse and that should be considered the only solution in my view   Without further ado  here s the simplified markup    lt form novalidate  novalidate  gt       lt label gt email lt  label gt       lt input type  text          ng-model  email          name  email    gt       lt label gt email repeated lt  label gt       lt input ng-model  emailRepeated          same-as  email          name  emailRepeated    gt   lt  form gt    And the JS code   angular module  app            directive  sameAs   function             return               require   ngModel               link  function scope  elem  attrs  ngModel                    ngModel  parsers unshift validate                       Force-trigger the parsing pipeline                  scope  watch attrs sameAs  function                         ngModel  setViewValue ngModel  viewValue                                        function validate value                        var isValid   scope  eval attrs sameAs     value                       ngModel  setValidity  same-as   isValid                        return isValid   value   undefined                                                       The directive hooks into the parsers pipeline in order to get notified of any changes to the view value and set validity based on comparison of the new view value and the value of the reference field  That bit is easy  The tricky bit is sniffing for changes on the reference field  For that the directive sets a watcher on the reference value and force-triggeres the parsing pipeline  in order to get all the validators run again   If you want to play with it  here is my pen  http   codepen io jciolek pen kaKEn  I hope it helps  Jacek

User · Answer

You should be able to use ng-pattern regex for comparing 2 input values  Email  lt input type  email  name  email1  ng-model  emailReg  gt  Repeat Email  lt input type  email  name  email2  ng-model  emailReg2  ng-pattern  emailReg  gt    and validation with    lt span ng-show  registerForm email2  error pattern  gt Repeat Email should have the same value with email  lt  span gt

User · Answer

Henry-Neo s method was close  it just needed more strict Regex rules    lt form name  emailForm  gt      Email   lt input type  email  name  email1  ng-model  emailReg  gt      Repeat Email   lt input type  email  name  email2  ng-model  emailReg2  ng-pattern   emailReg   gt   lt  form gt    By including the regex rule inside parentheses  it will match the entire string of emailReg to emailReg2 and will cause the form validation to fail because it doesn t match   You can then drill into the elements to find out which part is failing     lt p ng-show  emailForm  valid  gt Form Valid lt  p gt    lt p ng-show  emailForm email1  error  gt Email not valid lt  p gt    lt p ng-show  emailForm email1  valid  amp  amp  emailForm email1  error pattern  gt       Emails Do Not Match   lt  p gt

User · Answer

When upgrading angular to 1 3 and above I found an issue using Jacek Ciolek s great answer    Add data to the reference field Add the same data to the field with the directive on it  this field is now valid  Go back to the reference field and change the data  directive field remains valid     I tested rdukeshier s answer  updating var modelToMatch   element attr  sameAs   to var modelToMatch   attrs sameAs to retrieve the reference model correctly  but the same issue occurred   To fix this  tested in angular 1 3 and 1 4  I adapted rdukeshier s code and added a watcher on the reference field to run all validations when the reference field is changed  The directive now looks like this   angular module  app          directive  sameAs   function          return         require   ngModel         link  function scope  element  attrs  ctrl            var modelToMatch   attrs sameAs                 scope  watch attrs sameAs  function               ctrl  validate                                  ctrl  validators match   function modelValue  viewValue              return viewValue     scope  eval modelToMatch                                  Updated codepen

User · Answer

This module works well for comparing two fields  Works great with Angular 1 3   Simple to use https   www npmjs com package angular-password  It also allows saving the module as a generic  Just include them in packages list of your module

User · Answer

Here is my simple version of the custom validator directive   angular module  app      directive  equalsTo   function          return         require   ngModel         link     function  scope  elm  attrs  ngModel            scope  watchGroup  attrs equalsTo       gt  ngModel  modelValue   newVal   gt              ngModel  setValidity  equalsTo   newVal 0      newVal 1

User · Answer

I need to do this just in one form in my entire application and i see a directive like a super complicate for my case  so i use the ng-patter like some has point  but have some problems  when the string has special characters like     this broke  so i create a function for scape special characters    scope escapeRegExp str      return str replace    -                                g       amp         and in the view   lt form name  ExampleForm  gt     lt label gt Password lt  label gt     lt input ng-model  password  required   gt     lt br gt      lt label gt Confirm password lt  label gt     lt input ng-model  confirmPassword  required ng-pattern  escapeRegExp password    gt     lt  form gt

User · Answer

Mine is similar to your solution but I got it to work  Only difference is my model   I have the following models in my html input   ng-model  new Participant email  ng-model  new Participant confirmEmail    and in my controller  I have this in  scope     scope new             Participant              and this validation line worked    lt label class  help-block  ng-show  new Participant email     new Participant confirmEmail  gt Emails must match   lt  label gt

User · Answer

Here is an angular 1 3 version of the sameAs directive   angular module  app   directive  sameAs    function        use strict      return       require   ngModel       restrict   A       link  function scope  element  attrs  ctrl          var modelToMatch   element attr  sameAs                ctrl  validators match   function modelValue  viewValue            return viewValue     scope  eval modelToMatch

User · Answer

Thanks for the great example  Jacek Ciolek  For angular 1 3 x this solution breaks when updates are made to the reference input value  Building on this example for angular 1 3 x  this solution works just as well with Angular 1 3 x  It binds and watches for changes to the reference value   angular module  app       directive  sameAs   function       return       restrict   A       require   ngModel       scope          sameAs                 link  function scope  elm  attr  ngModel          if   ngModel  return         attr  observe  ngModel   function value               observes changes to this ngModel         ngModel  validate                     scope  watch  sameAs   function sameAs               watches for changes from sameAs binding         ngModel  validate                     ngModel  validators sameAs   function value            return scope sameAs    value                            Here is my pen  http   codepen io kvangrae pen BjxMWR

User · Answer

use ng-pattern  so that ng-valid and ng-dirty can act correctly  Email  lt input type  email  name  email1  ng-model  emailReg  gt  Repeat Email  lt input type  email  name  email2  ng-model  emailReg2  ng-pattern  emailReg  gt    lt span ng-show  registerForm email2  error pattern  gt Emails have to match  lt  span gt

User · Answer

You have to look at the bigger problem  How to write the directives that solve one problem  You should try directive use-form-error  Would it help to solve this problem  and many others        lt form name  ExampleForm  gt     lt label gt Password lt  label gt     lt input ng-model  password  required   gt     lt br gt      lt label gt Confirm password lt  label gt     lt input ng-model  confirmPassword  required   gt     lt div use-form-error  isSame  use-error-expression  password  amp  amp  confirmPassword  amp  amp  password  confirmPassword  ng-show  ExampleForm  error isSame  gt Passwords Do Not Match  lt  div gt   lt  form gt    Live example jsfiddle

User · Answer

Of course for very simple comparisons you can always use ngMin ngMax   Otherwise  you can go with a custom directive  and there is no need of doing any  watch or  observe or  eval or this fancy  setValidity back and forth  Also  there is no need to hook into the postLink function at all  Try to stay out of the DOM as much as possible  as it is against the angular spirit   Just use the lifecycle hooks the framework gives you  Add a validator and  validate at each change  Simple as that   app directive  sameAs   function       return       restrict   A       require          ngModelCtrl   ngModel             scope          reference    lt sameAs             bindToController  true      controller  function  scope          var  ctrl    scope  ctrl           add the validator to the ngModelController        ctrl  onInit   function             function sameAsReference  modelValue  viewValue              if    ctrl reference     modelValue      nothing to compare             return true                        return modelValue      ctrl reference                     ctrl ngModelCtrl  validators sameas   sameAsReference                    do the check at each change        ctrl  onChanges   function changesObj             ctrl ngModelCtrl  validate                        controllerAs    ctrl             Your plunker

User · Answer

I recently wrote a custom directive which can be generic enough to do any validation  It take a validation function from the current scope   module directive  customValidator    function              return               restrict   A               require   ngModel               scope    validateFunction    amp                  link  function  scope  elm  attr  ngModelCtrl                    ngModelCtrl  parsers push function  value                        var result   scope validateFunction    value   value                         if  result    result     false                            if  result then                                result then function  data                For promise type result object                                 ngModelCtrl  setValidity attr customValidator  data                                  function  error                                    ngModelCtrl  setValidity attr customValidator  false                                                                                     else                               ngModelCtrl  setValidity attr customValidator  result                               return result   value   undefined         For boolean result return based on boolean value                                                                     return value                                                          To use it you do   lt input type  email  name  email2  ng-model  emailReg2  custom-validator  emailMatch  data-validate-function  checkEmailMatch value   gt   lt span ng-show  registerForm email2  error emailMatch  gt Emails have to match  lt  span gt    In you controller then you can implement the method  that should return true or false   scope checkEmailMatch function value        return value    scope emailReg      The advantage is that you do not have to write custom directive for each custom validation

User · Answer

No need a function or a directive  Just compare their  modelValue from the view    ng-show  formName email  modelValue     formName confirmEmail  modelValue    More detailed example     lt span ng-show   formName email  modelValue     formName confirmEmail  modelValue                    amp  amp  formName confirmEmail  touched                  amp  amp   formName confirmEmail  error required  gt Email does not match  lt  span gt    Please note that the ConfirmEmail is outside the ViewModel  it s property of the  scope  It doesn t need to be submitted

[forms] Comparing two input values in a form validation with AngularJS

Update

Examples related to forms

Examples related to angularjs

Examples related to validation