AngularJS表单验证不使用指令

i'm trying to do basic validation of the form fields in angular. It works properly when i inline the input field(s) with the form, however when I'm trying to use directives for inserting the input form field, the validation does not work as expected.

我正在尝试以角度对表单字段进行基本验证。当我使用表单内联输入字段时,它可以正常工作,但是当我尝试使用指令插入输入表单字段时,验证不能按预期工作。

here is the JSbin showing the problem. I would appreciate some help thanks!

这是JSbin显示问题。我要感谢一些帮助谢谢!

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

2 个解决方案

#1

How Angular Validation Works

Angular uses the 'name' attribute to create the $scope variables used for validation.

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

For example, if you have an input field with a 'required' attribute:

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

<form name="myform">
   <input name="firstname" ng-model="firstname" type="text" required/>
</form> 

Then to access the validation properties on $scope, you would do:

然后,要访问$ scope上的验证属性,您将执行以下操作:

var validationFailed = $scope.myform.firstname.$error.required;

Where $error is an object that has 'required' as a Boolean property.

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

In the 'required' directive, you would see something like this:

在'required'指令中,您会看到如下内容:

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

You can pass any string to $setValidity, and it will set the $error property for you. For example, if you did:

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

$setValidity('test', true)

Then there would be an $error property named 'test' and it would be set to true. You can then access the property like this:

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

$scope.myform.firstname.$error.test

Other validation properties that are available are:

其他可用的验证属性包括:

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

Hope this helps to answer your question.

希望这有助于回答您的问题。

#2

Click Here you can use this code.

单击此处可以使用此代码。

    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>