带有错误消息管理的表单元素指令 AngularJS

Question

我正在尝试创建一个带验证的输入指令元素。我想在此指令中管理错误状态。

有3个文件

Index.html: 使用这个指令
textValid.js: 包含指令代码
textValid.html: 包含指令模板

我创建了这个指令

textValid.js

App.directive("textValid", function() {
    return {
        restrict: "E",
        templateUrl: "tpl/textValid.html",
        require: "?ngModel",

        scope: {
            name: "@",
            element: "=",
            model: "="
        }
    };
});

index.html

<form name="edit_form_ctrl.contract_edit_form" action="#" novalidate >
     <div class="row">
         <text-valid name="ncontract"model="edit_form_ctrl.contract.ncontract"
                     element="edit_form_ctrl.contract_edit_form.ncontract">
         </text-valid>
     </div>
</form>

和模板textValid.html

<input type="text" name="name" ng-model="model" class="form-control" ng-required="true" value="{{model}}" />
     <div>pristine: {{element.$pristine}}</div> <!--is always undefined-->
     <div>Invalid: {{element.$error}}</div> <!--is always undefined-->
<span class="color-red" ng-if="element.$error.required  &&!element.$pristine">
    {{curLang.field_mandatory}}
</span>

我正在尝试获取输入控件以检查 $error 和 $pristine 值，但我无法实现。

我也阅读了所有文档和这本书，但没有任何结果。

有人尝试这样做吗？

提前致谢

Answer 1

试试这个：

<input type="text" name="name" ng-model="model" class="form-control" ng-required="true" value="{{model}}" />
     <div>pristine: {{form.name.$pristine}}</div> <!--is always undefined-->
     <div>Invalid: {{form.name.$error}}</div> <!--is always undefined-->
<span class="color-red" ng-if="element.$error.required  &&!element.$pristine">
    {{curLang.field_mandatory}}
</span>

Answer 2

如果像这样在输入元素的名称属性周围添加 {{double-curlies}}：

<input type="text" name="{{name}}" ng-model="model" class="form-control" ng-required="true" />

您应该能够从 text-valid 内部使用 $scope.form[$scope.name]

访问它的 ngModelController

一些其他注意事项：

在具有 ng-model 属性的元素上使用 value 属性不会产生任何影响。
您的指令定义中有 require: '?ngModel'，但 text-valid 元素上没有 ng-model 属性。这没关系，但是除非 text-valid 元素具有 ng-model 属性，否则您不会注入任何 ngModelController。

编辑：

因为 text-valid 具有隔离范围，要访问 FormController，您需要要求它并绑定它：

App.directive("textValid", function() {
    return {
        restrict: "E",
        templateUrl: "tpl/textValid.html",
        require: "^^form",

        scope: {
            name: "@",
            element: "=",
            model: "="
        },
        link: function($scope, elem, attr, FormCtrl){
            $scope.form = FormCtrl;
            // now you should be able to access $scope.form[$scope.name]
            // (you *might* need to put any initialization that accesses it inside a $timeout to wait for it to be rendered/bound)
        }
    };
});

在模板中，您应该可以像这样访问它：

<div>pristine: {{form[name].$pristine}}</div>
<div>Invalid: {{form[name].$error}}</div>

带有错误消息管理的表单元素指令 AngularJS

Form element directive with error message manage AngularJS

html

javascript

validation

directive

angularjs