Question

背景

我正在维护现有的AngularJS应用程序。

我有一个基于正则表达式模式进行验证的文本字段。

<input type="text" class="validate" name="recipientContact"  id="recipientContact" ng-model="orderdata.recipient_contact" ng-pattern="/[(]([0-9]{3})[)]\s([0-9]{3})[-]([0-9]{4})/g" required>

正则表达式验证本身正在运行。我确认输入有效值时$ valid返回true，输入无效值时返回false。

<p ng-bind="orderForm.recipientContact.$valid && ordersaveFlag"></p> //returns true for valid values, returns false for invalid values

问题

然而，问题是Angular正在添加＆＃34;有效＆＃34;即使输入了无效值，也会输入class属性值。

这不影响功能（当输入无效值时表单会停止），但它影响样式（输入元素边框颜色变为绿色而不是红色）。

当我做＆＃34;检查＆＃34;在元素上，我确认＆＃34;有效＆＃34;正在动态添加类。为什么要添加＆＃34;有效＆＃34;甚至当$ valid是假的时候？ Angular＆＃34;知道＆＃34;文本字段无效，应该添加＆＃34;无效＆＃34;而不是类，正确地应用了样式。

当输入无效值时（带有所有动态添加的类属性值），这里有检查在实时页面上显示的内容。它应该是添加类属性值＆＃34;无效＆＃34;而不是＆＃34;有效＆＃34;。

<input type="text" class="validate ng-invalid ng-touched ng-dirty ng-valid-parse ng-valid-required ng-invalid-pattern valid" name="recipientContact"  id="recipientContact" ng-model="orderdata.recipient_contact" ng-pattern="/[(]([0-9]{3})[)]\s([0-9]{3})[-]([0-9]{4})/g" required>

我如何进一步调查此问题？谢谢！

Answer 1

我能够用ng-class条件解决问题。

with cte as(
   Select student_id
      ,student_name
      ,student_phnumber
      ,row_number() over (partition by student_name order by student_id) rn
from student
where student_name in ( 'Rachel','Adam','Terry'))

select * from cte where rn < 11

这篇文章很有帮助：

AngularJS | Conditional Class using ng-class

AngularJS验证添加＆＃34;有效＆＃34;类值，即使$ valid返回false

1 个答案: