用AngularJS比较表单验证中的两个输入值 [英] Comparing two input values in a form validation with AngularJS

问题描述

我正在尝试使用AngularJS进行表单验证。我对比较两个值特别感兴趣。我希望用户在继续之前确认他输入的一些数据。假设我有以下代码：

 < p> 
电子邮件地址：< input type =emailname =email1ng-model =emailReg> 
重复电子邮件：< input type =emailname =email2ng-model =emailReg2> 
< p> 
  

然后我可以使用验证：

 < span ng-show =registerForm.email1。$ error.required>必需！< / span> 
< span ng-show =registerForm.email1。$ error.email>无效的电子邮件！< / span> 
< span ng-show =emailReg！== emailReg2>电子邮件必须匹配！< / span> <  - 看到这一行$​​ b $ b  

registerForm。$ valid将对输入文本做出正确反应我不知道如何在此验证中使用比较来强制邮件在允许用户提交表单前保持不变。

我很想拥有解决方案没有自定义指令，但如果没有它，我就不会处理它。 此处是解决类似问题的答案

任何帮助表示感谢，

>达到此目的的一种方法是使用自定义指令。以下是使用 ngMatch指令的示例：

 < p>电子邮件：< input type =emailname =email1ng-model =emailReg> 
重复电子邮件：< input type =emailname =email2ng-model =emailReg2ng-match =emailReg>< / p> 
 
< span data-ng-show =myForm.emailReg2。$ error.match>电子邮件必须匹配！< / span> 
  

注意：一般不推荐使用 ng - 作为自定义指令的前缀，因为它可能与官方AngularJS指令冲突。

更新

也可以在不使用自定义指令的情况下获得此功能： HTML

 < button ng-click =add（）>< / button> 
< span ng -show =IsMatch>电子邮件必须匹配！< / span> 
  

控制器

  $ scope.add = function（）{
 if （$ scope.emailReg！= $ scope.emailReg2）{
 $ scope.IsMatch = true; 
 return false; 
} 
 $ scope.IsMatch = false; 
} 
  

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:

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

and then I can use validation with:

<span ng-show="registerForm.email1.$error.required">Required!</span>
<span ng-show="registerForm.email1.$error.email">Not valid email!</span>
<span ng-show="emailReg !== emailReg2">Emails have to match!</span>  <-- 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

解决方案

One way to achieve this is with a custom directive. Here's an example using the ngMatch directive:

<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;
}

这篇关于用AngularJS比较表单验证中的两个输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！