Question

我的表单上有两个简单的inputs。我需要它们才能匹配，但由于它们是电话号码，我向其添加了uimask，因此用户只能输入数字，并且自动格式化为(999)-999-9999。

我的问题是，我确保两个字段相互匹配的所有尝试都出错了。如果我使用uimask，我永远无法让它们匹配（从模型的角度来看）。如果我从表单中删除uimask，则匹配将按预期工作。

请查看此codepen以查看问题。我错过了什么吗？或者我根本不允许模式匹配使用uimask的两个字段？

以下是一个缩短的示例，以防codepen不起作用。我总是看到doesnt match的错误消息，即使这两个字段中的值相同。

 <form name="demo" class="container"> 
 <input class="form-control" type="text" 
         id="phone" 
         name="phone" 
         ng-model="x"
         ui-mask="(999) 999-9999" />

 <input class="form-control" type="text" 
         id="phone2" 
         name="phone2" 
         ng-model="y" 
         ui-mask="(999) 999-9999" 
         ng-pattern="(x)"/>

 <div ng-messages="demo.phone2.$error" role="alert">
    <div class="text-danger" ng-message="pattern">doesnt match.</div>
  </div>

Answer 1

您误解了ng-pattern的工作原理。 ng-pattern是一个正则表达式验证程序，ui-mask已经在很小程度上解决了问题。在您的示例中，第二个输入实际上是在匹配正则表达式/^(x)$/，它与文字字符串"x"匹配，而不是与其中包含的变量匹配。

如果要验证两个输入是否匹配，则必须添加自己的验证。执行此操作的一种简单方法是添加ng-change事件以使用$setValidity(validationErrorKey, isValid)手动操作表单元素的有效性。我个人会在您的表单的控制器中添加这种类型，但是这些对codepen中代码的调整应该有效。

  <input class="form-control" ng-class="{requiredControl:demo.phone.$dirty && demo.phone.$invalid}" type="text" 
         id="phone" 
         name="phone" 
         ng-model="x"
         ng-change="demo.phone2.$setValidity('match', x==y)"
         ng-required="true"
         ui-options="{clearOnBlur:false}" ui-mask-placeholder 
         ui-mask-placeholder-char="_" 
         ui-mask="(999) 999-9999" />    

  <input class="form-control" ng-class="{requiredControl:demo.phone.$dirty && demo.phone.$invalid}" type="text" 
         id="phone2" 
         name="phone2" 
         ng-model="y" 
         ng-required="true"
         ng-change="demo.phone2.$setValidity('match', x==y)"
         ui-options="{clearOnBlur:false}" ui-mask-placeholder 
         ui-mask-placeholder-char="_" 
         ui-mask="(999) 999-9999"/>

然后确保在ng-messages中引用正确的错误标签。我使用了标记为'match'的新错误而不是内置'pattern'来更好地传达验证的内容。

<div ng-messages="demo.phone.$error" role="alert" ng-if="demo.phone.$dirty">
     <div class="text-danger" ng-message="match">doesnt match.</div>
</div>

Branch of your codepen

与UIMask匹配的Ng模式

1 个答案: