AngularJS表单验证不支持指令

AngularJS form Validation not working with directives

本文关键字：指令 不支持 验证 表单 AngularJS      更新时间：2023-09-26

我想做的表单字段在角的基本验证。当我将输入字段与表单内联时，它可以正常工作，但是当我试图使用指令插入输入表单字段时，验证不像预期的那样工作。

是显示问题的JSbin。我将感激一些帮助，谢谢!

http://jsbin.com/sufotecenovi/2/edit

Angular验证是如何工作的

Angular使用'name'属性来创建用于验证的$scope变量。

例如，如果你有一个带有'required'属性的输入字段:

<form name="myform">
   <input name="firstname" ng-model="firstname" type="text" required/>
</form>
要访问$scope上的验证属性，可以这样做: 
var validationFailed = $scope.myform.firstname.$error.required;

其中$error是一个布尔属性为'required'的对象

在'required'指令中，你会看到这样的内容:

                if(attrs.value == ''){
                    ngModel.$setValidity('required', true); // failed validation
                } else {
                    ngModel.$setValidity('required', false); // passed validation
                }

你可以传递任何字符串给$setValidity，它会为你设置$error属性。例如，如果您这样做:

$setValidity('test', true)

然后会有一个名为'test'的$error属性，并将其设置为true。然后您可以像这样访问该属性:

$scope.myform.firstname.$error.test

其他可用的验证属性有:

$scope.myform.firstname.$valid
$scope.myform.firstname.$invalid
$scope.myform.firstname.$pristine
$scope.myform.$valid
$scope.myform.$invalid
$scope.myform.$pristine

点击这里您可以使用此代码。

    function MyCtrl($scope) {
    $scope.formFields = [
        {
            name: 'firstName',
            type: 'text'
        },
        {
            name: 'email',
            type: 'email'
        }
    ];
}
myApp.directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    };
});

<div ng-controller="MyCtrl">
    <form name="myForm">
        <p ng-repeat="field in formFields">
                <input
                    dynamic-name="field.name"
                    type="{{ field.type }}"
                    placeholder="{{ field.name }}"
                    ng-model="field.value"
                    required
                >
        </p>
        <code class="ie">
            myForm.firstName.$valid = {{ myForm.firstName.$valid }}
        </code>    
        <code class="ie">
            myForm.email.$valid = {{ myForm.email.$valid }}
        </code>            
        <code class="ie">
            myForm.$valid = {{ myForm.$valid }}
        </code>
        <hr>               
    </form>
</div>
相关文章：