Background
I am maintaining an existing AngularJS application.
I have a text field with validation based on a regex pattern.
<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>
The regex validation itself is working. I confirmed that $valid is returning true when an valid value is entered, and it returns false when an invalid value is entered.
<p ng-bind="orderForm.recipientContact.$valid && ordersaveFlag"></p> //returns true for valid values, returns false for invalid values
Problem
However, the problem is that Angular is adding the "valid" class attribute value even when an invalid value is entered.
This is not affecting functionality (the form stops when an invalid value is entered) but it is is affecting the styling (the input element border color turns green rather than red).
When I do an "inspect" on the element, I confirmed that the "valid" class is being added dynamically. Why is it adding the "valid" class even when $valid is false? Angular "knows" the text field isn't valid, and it should be adding the "invalid" class instead, that way the style is applied correctly.
Here's what inspect shows on the live page when an invalid value is entered (with all of the dynamically added class attribute values). It should be adding the class attribute value "invalid" instead of "valid".
<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>
How can I investigate this issue further? Thanks!
