仅在输入具有数据时进行角度验证

时间:2015-09-02 01:24:46

标签: angularjs angularjs-directive

我正在使用带有ng-pattern的角度1.4和自定义异步验证器。

我有2个带验证的字段,一个是必需的,另一个不是。我需要验证第二个提交时它有什么内容。问题是,当第二个字段的验证器未通过时,我无法提交表单。

这样做有一种优雅的方法吗?

由于

<input
    name="name"
    type="text"
    ng-model="model.software.name"
    required>
<div ng-messages="myForm.myInput.$error" ng-if="myForm.name.$touched && myForm.name.$invalid">
    <p ng-message="required">Required warning</p>
</div>

<input
    name="myInput"
    type="text"
    ng-model="myInput"
    ng-pattern="/someregex/"
    async-validator>
<div ng-if="myForm.myInput.$pending">PENDING</div>
<div ng-messages="myForm.myInput.$error" ng-if="myForm.myInput.$touched && myForm.myInput.$invalid">
    <p ng-message="pattern">Pattern warning</p>
    <p ng-message="asyncValidator">async warning</p>
</div>

<button ng-click="process()" ng-disabled="myForm.$invalid">Process</button>

这是我的验证员:

app.directive('asyncValidator', ['$http', '$q', function ($http, $q) {
    return {
        require : 'ngModel',
        link : function (scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.asyncValidator = function (modelValue, viewValue) {
                return $http.post('path', {value : viewValue}).then(
                    function (response) {
                        if (not_good) {
                            return $q.reject(not_good);
                        }
                        return true;
                    }
                );
            };
        }
    };
}]);

1 个答案:

答案 0 :(得分:0)

经过一番挖掘后,我发现我的asyncvalidator不允许空值。这有效,但如果有更好的方法请告诉我。

感谢Anid和所有人。

经过调整的验证人:

app.directive('asyncValidator', ['$http', '$q', function ($http, $q) {
    return {
        require : 'ngModel',
        link : function (scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.asyncValidator = function (modelValue, viewValue) {
                if (ngModel.$isEmpty(viewValue)) {
                    return $q.resolve();
                }
                return $http.post('path', {value : viewValue}).then(
                    function (response) {
                        if (not_good) {
                            return $q.reject(not_good);
                        }
                        return true;
                    }
                );
            };
        }
    };
}]);