如何从指令中对表单中的元素设置验证？答案

【问题标题】：How can I setValidate on an element in the form from a directive?如何从指令中对表单中的元素设置验证？
【发布时间】：2015-03-08 18:57:33
【问题描述】：

我有一个链接到表单上的文本框的指令，我希望该指令设置“必需”错误。

这是一个显示我正在尝试做的小提琴

http://jsfiddle.net/scottieslg/7qLsj3rr/3/

HTML：

<div ng-app='myApp' ng-controller='TestCtrl'>
    <ng-form name='testForm'>
        <input type='text' name='myInput' />
        <div ng-messages="testForm.myInput.$error">
            <div ng-message="required">Required</div>
        </div>
        <test-directive ng-model='testModel'></test-directive>
    </ng-form>
</div>

Javascript：

var app = angular.module('myApp', ['ngMessages']);

app.controller('TestCtrl', function($scope) {
    $scope.testModel = {}
});

app.directive('testDirective', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        template: '<div><button ng-click="setError()">Set Error</button></div>',
        link: function(scope, element, attrs, ngModelCtrl) {            
            scope.setError = function() {
                // How can I set .setValidate('require', true) on myInput from here??
            }
        }
    }
});

【问题讨论】：

为什么在testDirective 上需要ng-model？
从你的问题中不清楚你想做什么，请更新你的问题
当字段有值时，你不能假装required 验证器应该失败。我认为您可能有兴趣创建您的custom validation logic。

标签： angularjs validation angularjs-directive

【解决方案1】：

如果您希望test-directive 能够控制表单中单独命名输入上的ngModelController 实例，那么再次使用ng-model 指令不是正确的做法，因为这会创建test-directive 上的新 ngModelController 实例。

test-directive 实际上需要知道的是具有控制器的输入的名称：

<test-directive name='myInput'></test-directive>

然后它可以访问表单控制器，使用

require: '^form',

并使用name 属性值在表单上查找ngModelController 实例：

link: function(scope, element, attrs, formController) {            
  scope.setError = function() {
    var ngModelCtrl = formController[attrs.name];
    ngModelCtrl.$setValidity('required', false);
  }
}

你可以在http://jsfiddle.net/7qLsj3rr/6/看到这个。

注意：如果您使用 required 作为键，那么一旦您再次输入输入，Angular 自己的 required 验证将启动并删除错误。

【讨论】：