Question

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

这是一个小提示，显示我正在尝试做什么

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指令不是正确的做法这样做会在ngModelController上创建一个新的test-directive实例。

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作为键，那么只要再次输入输入，角度自己的required验证就会启用删除错误。

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

1 个答案: