gpt4 book ai didi

javascript - Angular Directive(指令)中的模糊无法正常工作

转载 作者:行者123 更新时间:2023-12-01 05:31:22 25 4
gpt4 key购买 nike

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

我想创建一个指令,该指令将在确认电子邮件字段模糊时比较确认电子邮件字段和电子邮件字段。在确认电子邮件模糊时,我想验证并显示消息(如果它与电子邮件字段不匹配)。

怀疑:我快完成了。但不知何故,onblur 表现不正常。

以下情况之一:

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

之后,当我返回确认电子邮件字段并创建 a@xsdf 并退出验证时,验证不会触发。但是,如果我在表单中输入其他文本框(如名字),则消息得到反射(reflect)。您能建议一下代码中的错误吗?

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

最佳答案

jquery事件不会触发$digest圆 Angular ,你应该使用$apply来触发这个圆

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

关于javascript - Angular Directive(指令)中的模糊无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37078357/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com