Question

我想使用AngularJS提供的内置表单验证。但是，在表单中我使用自定义指令，每个指令都有一个隔离范围。因此，表单元素无法访问绑定值。

知道如何解决这个问题吗？

或者，是否可以在不使用表单的情况下使用AngularJS验证？

ng-minlength和ng-required指令不会触发表单验证。

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm" novalidate>
        <do-something ng-model="variable"></do-something>
        <h4 data-ng-if="myForm.myElement.$error.required">Please enter something</h4>
        <h4 data-ng-if="myForm.myElement.$error.greaterThanOne">Please enter a value greater than 1</h4>
        <h4 data-ng-if="myForm.myElement.$error.minLength">Please enter something longer than 1 digit</h4>
    {{myForm.myElement.$error}}     
    </form>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
});
app.directive('doSomething', function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        scope: {
            model: '=ngModel'
        },
        template: 
            '<div>' +
            '  <input name="myElement" ng-model="model" ng-required ng-minlength="1" />' +
            '</div>'
    }
});

可以在这里找到Full Plunk：这是一个演示问题的探测器：http://plnkr.co/edit/iWyvX2?p=preview

Answer 1

根据我的理解，是的，你必须使用表格进行验证。

我验证的方式是设置如下的指令

module.directive('ngDoSomething', function() {
    restrict: 'A'
    require: '?ngModel',
    scope: {
        model: '=ngModel'
    }
    link: function($scope, element, attrs, ngModel) {
    $scope.$watch('model', function(val) {
        ngModel.$setValidity('required', !!val);
        ngModel.$setValidity('greaterThanOne', val > 1);
    }
});

然后使用html

<form name="somethingForm">
  <input name="somethingElement" data-ng-do-something data-ng-model="variable" />
  <h4 data-ng-if="somethingForm.somethingElement.$error.required">Please enter something</h4>
  <h4 data-ng-if="somethingForm.somethingElement.$error.greaterThanOne">Please enter a value greater than 1</h4>
</form>

我希望这会有所帮助

Answer 2

好的丹尼尔，我很感兴趣，所以我进一步研究了一下。您的代码与@ user3766487之间的主要区别在于您正在使用指令元素并注入模板。我相信这引起了一些歧义（你会发现指令本身和inject输入元素都有相同的名称属性）。模型的联系似乎也没有起作用。

我已经更改了代码来替换模板，这使事情变得更简单了。它似乎有效：

http://plnkr.co/edit/eTSbjNe4KXW9IbUKtKuG

Answer 3

ng-validators将按预期工作，并进行以下两项更改：

（1）将属性名称更改为“minlength”（而不是“minLength”）：

<h4 data-ng-if="myForm.myElement.$error.minlength">

（2）将ng-required设置为“true”：

<input name="myElement" ... ng-required="true">

将minlength设置为“1”不会执行任何操作，因为表单验证不会检查输入为空的最小长度。如果您将minlength设置为“5”并在输入中键入一个字符，您将看到消息“请输入超过5位数的字符”

http://plnkr.co/edit/porkuq5JcKDU89s8g8ZT?p=preview

您的自定义验证程序“greaterThanOne”是在do-something指令中定义的。您可以通过添加名称属性（如myElementContainer：

）来显示其消息

<do-something name="myElementContainer" ng-model="myElement"></do-something>
  <h4 data-ng-show="myForm.myElementContainer.$error.greaterThanOne">Please enter a value greater than 1</h4>

我建议将另一个指令中的逻辑定义为输入元素的属性。

另外，建议使用$ validator调用$ setValidity： https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

具有隔离范围的AngularJS表单验证

3 个答案: