Question

输入应遵循一种模式（例如name是唯一的）。我已经编写了一个自定义指令来验证输入。

validationApp.directive('validationUrl', function($http, $parse){
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {

      var queryParams = $parse(attrs['validationAttrs'])(scope);

      var validate = function() {
        //$http.get( attrs['validationUrl'], {params: $parse(attrs['validationAttrs'])(scope)} )
        //.success(function ( data, status, headers, config ) {

        data = {
          isValid: ($parse(attrs['ngModel'])(scope)=='Bob'?false:true)
        }; //fake response

        if ( data.isValid ) {
          elem[0].pattern = '^.*$';
        } else {
          elem[0].pattern = '^(?!^' + $parse(attrs['ngModel'])(scope) + '$).*$';
        }
        //})
        //.error(function ( data, status, headers, config ) {
        //  console.log('GET failed. Error status: ' + status);
        //});
      };

      scope.$watch(attrs['ngModel'], function (newVal, oldVal) {
        validate();
      });

    }
  }
});

此指令似乎有效，Chrome的检查员告诉我输入元素最终呈现为

<input type="text" name="name" class="form-control" ng-model="user.name"
data-validation-url="http://example.com/validate/"
pattern="^(?!^Bob$).*$">

但是无论如何，Angular都会将此输入保持为ng-valid。

然后，当我将表单中的输入作为硬编码版本输入（完全如上），并输入＆＃34; Bob＆＃34;时，硬编码输入切换到ng-invalid。

Plunker demonstrates the issue.（名称2 是硬编码的。）

我错过了什么？

Answer 1

NewDev的评论很有帮助，我最终采用了以下方法，其中包含异步验证和模式。

app.directive('validationUrl', function($http, $parse, $q){
  return {
    restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel) {

            ngModel.$asyncValidators.customValidation = function(modelValue, viewValue) {
                var value = modelValue || viewValue;
                var params = [];
                params.value = value;

                return $http.get(attrs['validationUrl'], {params: params } )
                .then(function resolved(response) { 

                    if (response.data.isValid) {
                        elem[0].pattern = '^.*$';
                        return true;
                    } else {
                        elem[0].pattern = '^(?!^' + value + '$).*$';
                        return $q.reject('exists');                     
                    }

                });
            };

    }
  }
});

由于模式，焦点将移动到表单的第一个无效字段（默认Web浏览器行为）。

Angular中的Pattern属性（硬编码版本有效，动态不可用）

1 个答案: