Блог

Я пытаюсь создать элемент директивы ввода с проверкой. Я хотел бы управлять состоянием ошибки в этой директиве.

Есть 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  amp;amp;!element.$pristine">
    {{curLang.field_mandatory}}
</span>
  

Я пытаюсь заставить элемент управления вводом проверять $ error и $ нетронутое значение, но я не могу этого добиться.

Я прочитал всю документацию и книгу тоже, но без каких-либо результатов.

Кто-нибудь пытается это сделать?

Заранее спасибо

Если вы добавите {{двойные завитушки}} вокруг атрибута name элемента ввода следующим образом:

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

Вы должны иметь возможность получить доступ к ngModelController для него изнутри text-valid с помощью $scope.form[$scope.name]

Пара других замечаний:

1. использование value атрибута on и элемента с ng-model атрибутом не будет иметь эффекта.

2. у вас есть require: '?ngModel' в вашей директиве определение, но нет ng-model атрибута для text-valid элемента. Это нормально, но вы не получите никаких ngModelController вводимых данных, если у text-valid элемента нет ng-model атрибута.

Редактировать:

Поскольку 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>
  

Попробуйте это:

 <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  amp;amp;!element.$pristine">
    {{curLang.field_mandatory}}
</span>