Question

我有一个问题，我使用ng-pattern验证一个字段，并尝试使用ng-class更改输入的外观。当不满足模式时会出现问题，因为在开始时没有反应。我的模式要求至少有两个字符，没有数字。我知道满足ng-class要求是因为我使用相同的要求来触发显示的跨度。在我再做一次更改后，它会触发（如果条件仍然满足）。例如，如果我键入＆＃34; a＆＃34;首先，span会显示告诉我这不行，但该课程不适用，但如果我输入＆＃34; 2＆＃34;接下来它会触发。另一方面，如果我然后改变＆＃34; 2＆＃34;到＆＃34; b＆＃34; （＆＃34; ab＆＃34;所以模式没问题），跨度将消失，但是课程仍在那里（直到下一次更改，例如添加另一个字母）。

纳克级：

ng-class="{'classValidationError' : orderForm.cc_name.$error.pattern == true}"

HTML：

<form ng-show="itemsCount" name="orderForm" ng-submit="placeOrder()" novalidate>
    <div id="customer-info" class="col-lg-7">
        <div id="customerData" >
        <div class="form-group col-sm-6">
            <label for="cc-name">Imie</label> 
            <input name="cc_name" id="cc-name" type="text" class="form-control" ng-model="customer.firstName" ng-class="{'classValidationError' : orderForm.cc_name.$error.pattern == true}" ng-pattern="namePattern" required ng-model-options="{ debounce: 500 }" ng-change="onChangeValidationWatcher(orderForm.cc_name)">
            <span  ng-show="orderForm.cc_name.$error.pattern" style="color:red;">Wrong format!</span>
            <span  ng-if="orderForm.cc_name.$error.required && orderForm.cc_name.$dirty == true" style="color:red;">This field can't be empty!</span>
        </div>
        </div>
    </div>
</form>

控制器中的模式：

$scope.namePattern = /^[A-Za-z ąćęłńóśźżĄĆĘŁŃÓŚŹŻ]{2,30}$/;

CSS类：

.classValidationError {
    background-color: #FA787E;
}

修改

似乎ng-class在刷新对象上的类时遇到了一些麻烦，并且延迟了。有没有像refreshState（）或其他什么方法？

Answer 1

您可以将此ng-class更改为：

ng-class="{ orderForm.cc_name.$error.pattern == true? 'classValidationError' : ''}"

使用此功能，您可以检查是否放置该课程。

Answer 2

替换

orderForm.cc_name.$error.pattern

与

orderForm.cc_name.$invalid

它应该工作：）

Answer 3

替换

ng-class =“{'classValidationError'：orderForm.cc_name。$ error.pattern == true}”

带

ng-class =“{'classValidationError'：orderForm.cc_name。$ error.pattern＆amp;＆amp; orderForm.cc_name。$ dirty}”

我认为它应该可以正常运作。

ng-class在满足条件后不立即设置类

3 个答案: