Javascript 角度模式属性（硬编码版本有效，动态版本无效）

输入应遵循唯一的模式（例如，

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会将此输入保持为有效

然后，当我在表单中输入硬编码版本的输入（如上所述）并输入“Bob”时，硬编码输入切换到

ng invalid

（名称2是硬编码的。）

---

我遗漏了什么？

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浏览器行为）。

您应该构建自己的验证程序，并且不要错过使用

ng模式的验证程序。如果您获得ngModel的控制器，您可以自己通过$setValidity函数设置状态。从你的问题中我不太明白预期的行为是什么，你得到了什么。不要展示什么是有效的（但不是你想要的），而是准确、清晰地描述你想要的。很可能您没有错误地处理验证问题，因此，与其处理您的系统中的错误，不如让我们了解您是什么after@Michael，我想我必须走那条路，谢谢你的链接@NewDev，我的用例是我需要检查后端是否已经存在给定的设备序列号。若确实如此，用户可能无法继续，我计划使用模式验证来强制执行此操作。@jsruok，所以您需要一个异步验证器-，而不是与模式混淆。事实上，这里的示例非常接近您所需要的