Twitter Bootstrap Question posted in

On-blur in angular directive not working properly – Twitter bootstrap

I have created a form. I have two email fields one is for Email and the other is confirm Email.

I wanted to create a directive which will compare confirmEmail field and Email field on blur of ConfirmEmail field. And on blur of confirm email i wanted to validate and show message if it doesn’t match with email field.

Doubt: I am almost done. But somehow the onblur is not behaving properly.

One of the below case:

When I enter a@x in email field. Then a@t in confirm email field and tab out. I see the validation message as it doesn’t match.

After that when I go back to confirm email field and make a@xsdf and tab out the validation doesn’t fire.But if I type in some other textbox in the form like firstname then message gets reflected. Could you please suggest what is wrong in the code.

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title></title>
</head>


<form name="myForm" novalidate>
  <div class="col-xs-12" ng-controller="myController">
    <br>
    <br> First Name
    <br>
    <firstname></firstname>
    <div ng-if="myForm.txtFirstName.$dirty">
      <div class="danger" ng-show="myForm.txtFirstName.$error.pattern">
        Enter First Name without Special Character
      </div>
    </div>
    <br>
    <br> Last Name
    <br>
    <input type="text" ng-model="LastName" name="txtLastName" class="form-control"></input>
    <br>
    <br> Email
    <br>
    <input type="email" name="txtemail" ng-model="Email" class="form-control"></input>
    <div ng-if="myForm.txtemail.$dirty">
      <div class="danger" ng-show="myForm.txtemail.$invalid">
        Enter Valid Email Id
      </div>
    </div>
    <br>
    <br> Confirm Email
    <br>
    <input type="text" name="txtConfirmEmail" ng-disabled="!myForm.txtemail.$viewValue"
    ng-model="EmailConfirm" match  match-Email="{{Email}}" match-Cemail="{{EmailConfirm}}" class="form-control"></input>
    <div class="danger" ng-show="mismatch">
      <span>Email and Confirm Email must match.</span>
    </div>

  </div>
</form>
</html>

https://plnkr.co/edit/Tn70GxyqAadg0EdqjFG6?p=preview

Tags:

3

Answers


  1. 0

    One way around is to replace {{Email}} with current form value:

    <input type="text" name="txtConfirmEmail" ng-disabled="!myForm.txtemail.$viewValue"
ng-model="EmailConfirm" match  match-Email="{{myForm.txtemail.$viewValue}}" match-Cemail="{{EmailConfirm}}" class="form-control" />
    Login or Signup to reply.
  2. 0

    You should get into the habit of using the “dot” on the scope; In your situation you should be using:

    $scope.model = {
    mismatch: false
  }

    Here’s your fixed plunker: https://plnkr.co/edit/XEZjkXaIecGC4oBox5Z0?p=preview

    Login or Signup to reply.
  3. 0

    jquery events doesnt trigger $digest circle of angular, you should use $apply for trigger this circle 

        scope.mismatch = false;
    debugger
    if (attrs.matchEmail === attrs.matchCemail) {
       scope.$apply(function(){
         scope.mismatch = false
      });
    } else
       scope.$apply(function(){
         scope.mismatch = true
      });
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search