Question

我希望这不是重复 - 有很多类似的问题，但我找不到有效的答案。

我有一个Angular指令，因此：

app.directive('emailInput', function(){
    return {
        restrict: 'E',
        templateUrl: 'template.html',
        link: function(scope, elem, attrs, ctrl){
            elem.bind('keyup', function(){
                // TODO - what?
            })
        }
    }
}

并在模板html中：

<input type="email" required ng-model="emailAddress" />

在不知道表单名称的情况下，在link函数中，我想知道emailAddress.$valid属性的值 - 我怎样才能得到它？

Answer 1

您可以使用formController，它可以访问注册到表单的所有输入

app.directive('emailInput', function(){
  return {
      require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope, elem, attrs, ctrl){
          elem.bind('keyup', function(){
              ctrl.emailAddress.$valid //check validity
          })
      }
  }
}

请记住，Angular会按名称跟踪输入元素。所以你必须给你的输入一个名字属性

<input type="email" required ng-model="emailAddress" name="emailAddress" />

我还建议可能只是通过指令属性传递所有这些。您可能不想对字段名称进行硬编码。所以你可以拥有一个有效性的属性

inputIsValid='formName.emailAddress.$valid'

在你的指令中评估（或观察它）。

Answer 2

我们可以在不知道输入元素名称的情况下更轻松地检查有效性。

app.directive('emailInput', function(){
  return {
      require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope, elem, attrs, ctrl){
          elem.bind('keyup', function(){
              ctrl.$valid //check validity here
          })
      }
  }
}

Answer 3

这是一个老帖子，但对于通过谷歌搜索来到这里的人来说，这是在不知道其名称的情况下检查指令中输入有效性的最简洁方法，因此您可以在任何输入元素上使用您的指令。

您只需要ngModel控制器：

app.directive('emailInput', function(){
  return {
    require: 'ngModel'
    restrict: 'E',
    templateUrl: 'template.html',
    link: function(scope, elem, attrs, ngModelCtrl){
      elem.bind('keyup', function(){
          ngModelCtrl.$valid //check validity
      })
    }
  }
}

请参阅属性部分下的ngModel.NgModelController的AngularJS文档，$valid：

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 4

知道它是一个旧线程，但如果有人遇到这个问题，这就是我解决它的方法：

app.directive('emailInput', function(){
  return {
      restrict: 'E',
      templateUrl: 'template.html',
      controller:function($scope){
         $scope.isInvalid = function(){
            return $scope.myelem.data().$ngModelController.$invalid;
         }
      },
      link: function(scope, elem, attrs){
          $scope.myelem = $(elem).find("input");
      }
  }
}

Answer 5

这是一个指令，即使没有输入任何内容，也会将dirty设置为true。

默认情况下，如果输入了某些内容，则设置$ dirty，并且在用户提交之前不会显示必需的错误消息。有了这个

function() {
    return function (scope, element, attrs) {
        $(element).blur(function () {
            scope.$apply(function() {
                var field = scope.$eval(attrs.makeDirty);
                field.$dirty = true;
            });
        });
    };

HTML：

<label class="fieldLabel" for="confirmEmail">Confirm Email*</label>
<input type="text" id="confirmEmail" name="confirmEmail" ng-model="confirmEmail" ng-pattern="{{Ctrl.Model.Email.EmailAddress}}" required make-dirty="form.confirmEmail">
<span class="error" ng-show="form.confirmEmail.$error.pattern && form.confirmEmail.$dirty">Emails must match</span>
<span class="error" ng-show="form.confirmEmail.$error.required && (form.$submitted || form.confirmEmail.$dirty)">Confirm your email</span>

这使我可以在用户填写表格或标签时提供反馈。

Answer 6

让我给你另一种方法，在某些情况下它可能很有用

link: function (scope, element, attrs, formCtrl) {
    scope.fileSizeError=false;
    scope.$watch(function () {
               return formCtrl.fileP.$error.maxSize;
             },function(newValue) {
                scope.fileSizeError=newValue;
             });          
}

在我的情况下，我在一个用于上传文件的指令中，所以我需要知道模板中var $ error.maxSize的状态，所以我这样做了。

Angularjs在指令内获得表单字段有效性

6 个答案: