带有错误消息的表单元素指令管理 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

如果在输入元素的 name 属性周围添加 {{double-curlies}}，如下所示：

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

您应该可以使用$scope.form[$scope.name]从text-valid内部访问ngModelController

其他几点说明：

1. 使用value 属性和带有ng-model 属性的元素将不起作用。

2. 您的指令定义中有require: '?ngModel'，但text-valid 元素上没有ng-model 属性。这没关系，但是除非text-valid 元素具有ng-model 属性，否则您不会得到任何ngModelController 被注入。

编辑：

因为text-valid 具有隔离作用域，要访问FormController，您需要 require 并绑定它：

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>

Answer 2

试试这个：

<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>