如何通过指令对表单中的元素进行 setValidate？

Question

我有一个链接到表单上的文本框的指令，我希望这个指令设置 'required' 错误。

这是一个 fiddle 显示我正在尝试做的事情

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??
            }
        }
    }
});

Answer 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 验证就会启动删除错误。

如何通过指令对表单中的元素进行 setValidate？

How can I setValidate on an element in the form from a directive?

validation

angularjs

angularjs-directive