Question

我有一个包含3个输入字段的表单，他们将验证。重要的是当用户与表单进行交互时，分别更改错误成功类。

<form class="form-horizontal" name="myForm" novalidate>
  <div class="form-group-sm has-feedback" ng-class="{ 'has-error' : myForm.Name.$invalid && !myForm.Name.$pristine || myForm.Name.$touched }">
    <label class="control-label" for="name-id">Name</label>
    <input type="text" 
                   class="form-control" 
                   placeholder="Name"  
                   name="Name"
                   ng-model="selected.name"
                   ng-pattern="/^[a-zA-Z]+/" 
                   ng-required="true"
            />
    <p class="help-block" ng-show="myForm.Name.$error.required && myForm.Name.$touched">Name is required</p>
    <p class="help-block" ng-show="myForm.Name.$error.pattern">Name must be written with letters</p>
 </div>
...

当用户在与输入字段交互后考虑所需字段和模式时，应将css类更改为has-success。

我试过这个：

<div class="form-group-sm has-feedback" ng-class="myForm.Name.$invalid && !myForm.Name.$pristine && myForm.Name.$touched ? 'has-error' : 'has-success'">
...

但它无法正常工作。任何人都可以帮助我吗？

我找到了解决方案。这是我的代码：

<div class="form-group-sm has-feedback" ng-class="{ 'has-error' : myForm.Name.$invalid && !myForm.Name.$pristine && myForm.Name.$touched, 'has-success' : myForm.Name.$valid }">
...
</div>

Answer 1

以这种方式尝试：

<div class="form-group-sm has-feedback" ng-class="{'has-error': myForm.Name.$invalid && !myForm.Name.$pristine && myForm.Name.$touched}">

Answer 2

我会推荐像这样的指令，因为它会使你的html更短。

/* Attach this to input fields to replicate the foundation abide behaviour for invalid form inputs
 * Marks the parent with class 'error' and toggles ng-hide on all elements with class error within
 * the parent element of the input */
.directive('ppHasError', [function() {
    return {
        restrict: 'A', //attribute only
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            var formName = element.parents('form[name]').attr('name');
            if( !ngModel )
                return;
            var parent = element.parent();
            if(parent.is('label'))
                parent = parent.parent();
            var errEl = parent.find('.error');
            scope.$watchGroup([formName + '.' + ngModel.$name + '.$invalid', formName + '.' + ngModel.$name + '.$touched'], function(newValues, oldValues) {
                var isInvalid = newValues[0];
                var touched = newValues[1];
                var isError = isInvalid && touched;
                parent.toggleClass('error', isError);
                errEl.toggleClass('ng-hide', !isError);
            });
        }
    };
}])

可以这样使用：

<div class="medium-10 small-9 columns">
    <label>{{ 'card_number' | translate }}</label>
    <input class="card-number" name="creditcardNumber" ng-model="paymentInfo.creditcardNumber" size="20" placeholder="4111111111111111" type="text"
        pp-has-error required="true">
    <small class="error">
        {{ 'card_number_error' | translate }}
    </small>
</div>

它将在父div上设置CSS类'error'，并使用ng-hide CSS类切换small.error标记。

通过AngularJS中的表单验证更改css类

2 个答案: