javascript - AngularJS 表单验证不适用于指令

Question

我正在尝试以 Angular 对表单字段进行基本验证。当我将输入字段与表单内联时它可以正常工作，但是当我尝试使用指令插入输入表单字段时，验证无法按预期工作。

这是显示问题的 JSbin。我将不胜感激，谢谢!

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

Answer 1

Angular 验证的工作原理

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

例如，如果您有一个带有“必填”属性的输入字段:

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

然后要访问 $scope 上的验证属性，您可以这样做:

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

其中 $error 是一个具有 bool 属性“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

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