AngularJS验证添加“有效”类值，即使$有效返回false

Question

出身背景

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

我有一个基于regex模式验证的文本字段。

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

正则表达式验证本身正在工作。我确认当输入有效值时，$合法返回true，当输入无效值时返回false。

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

问题

然而，问题是Angular正在添加“有效”类属性值，即使输入了无效值。

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

当我对元素进行“检查”时，我确认“有效”类是动态添加的。为什么即使$有效为false，它也会添加“有效”类？Angular“知道”文本字段无效，它应该添加“无效”类，这样才能正确应用样式。

这是当输入无效值（包含所有动态添加的类属性值）时，检查在实时页面上显示的内容。它应该添加类属性值“无效”而不是“有效”。

<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类条件解决问题。

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

这篇文章很有帮助：

AngularJS |使用ng类的条件类