Question

我创建了一个表单。我有两个电子邮件字段，一个用于电子邮件，另一个用于确认电子邮件。

我想创建一个指令，它会在ConfirmEmail字段模糊时比较confirmEmail字段和电子邮件字段。在确认电子邮件模糊的情况下，我想验证并显示消息，如果它与电子邮件字段不匹配。

怀疑：我差不多完成了。但不知何故，onblur行为不正常。

以下案例之一：

当我在电子邮件字段中输入 a @ x 时。然后在确认电子邮件字段中输入 a @ t 并标签。我看到验证消息，因为它不匹配。

之后当我回去确认电子邮件字段并使 a @ xsdf 并标签出来时，验证没有触发。但是如果我输入表格中的其他文本框，如firstname然后消息得到反映。你能否告诉你代码中出了什么问题。

<!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

Answer 1

一种方法是将{{Email}}替换为当前的表单值：

<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" />

Answer 2

你应养成在范围内使用“点”的习惯;在您的情况下，您应该使用：

$scope.model = {
    mismatch: false
  }

这是你固定的傻瓜：https://plnkr.co/edit/XEZjkXaIecGC4oBox5Z0?p=preview

Answer 3

jquery事件不会触发$digest角度圈，您应该使用$apply触发此圈

    scope.mismatch = false;
    debugger
    if (attrs.matchEmail === attrs.matchCemail) {
       scope.$apply(function(){
         scope.mismatch = false
      });
    } else
       scope.$apply(function(){
         scope.mismatch = true
      });
  });

角度指令中的模糊不能正常工作

3 个答案: