角度验证的工作原理

Question

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

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

Answer 1

角度验证的工作原理

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

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

Answer 2

Click Here 你可以使用这段代码。

    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>

AngularJS表单验证不使用指令

2 个答案:

角度验证的工作原理