23

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

我有一个 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属性的值 - 我怎样才能得到这个？

4

6 回答 6

33

您可以要求 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'

并在您的指令中评估（或 $watch 它）。

于 2013-10-16T21:34:49.627 回答
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
          })
      }
  }
}
于 2015-09-29T10:48:15.460 回答
1

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

您只需要要求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在 Properties 部分下：

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

于 2016-01-19T05:47:07.057 回答
1

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

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");
      }
  }
}
于 2016-01-25T11:29:36.360 回答
0

这是一个指令，即使没有输入任何内容，也会将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>

这让我可以在用户填写或点击表单时提供反馈。

于 2016-12-15T11:58:38.147 回答
0

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

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 的状态，所以我这样做了。

于 2017-04-19T15:03:08.947 回答