Угловое ng-обязательное не работает с пользовательской директивой

Question

Я использую Angularjs версии 1.5 для проверки входов в моей форме.

• нг-требуется используется для проверки всех входных требуется

Однако, он не работает с пользовательской директивы, которая делает комбо. Комбо получает элементы на основе переданного ему параметра с именем «listId». Затем он выполняет итерацию на «lookupItems», используя ng-repeat. Я думаю, что чего-то не хватает, как ngModel. Почему и как его реализовать?

Комбо директива:

app.directive('combo', function($http) { 
    return { 
     restrict: 'AE', 
     template: '<div class="input-group"> <select ng-model="selectedItem">' + 
      '<option ng-repeat="option in lookupItems" value={{option.ListValueID}}>{{option.Translation.Value}}</option></select>' + 
      ' {{selectedItem}} </div>', 
     replace: true, 
     scope: { 
      listId: '=', 
      defaultItem: '=', 
      selectedItem: '=' 
     }, 
     controller: function($scope) { 
      $http({ 
       method: 'GET', 
       url: '/home/listvalues?listid=' + $scope.listId 
      }).then(function(response) { 
       $scope.lookupItems = response.data; 
      }, function(error) { 
       alert(error.data); 
      }); 
     }, 
     link: function(scope, element, attrs) {} 
    }; 
}); 

Вид HTML: итерация над атрибутами, который содержит тип управления для визуализации, то его набор нг-требуется логическое значение на основе «атрибута. Обязательный ", который является истинным.

<form name="profileAttributesForm" ng-controller="metadataCtrl" class="my-form"> 
    <div ng-repeat="a in attributes"> 
     <div ng-if="a.DataType == 1"> 
      <input type="text" name="attribute_{{$index}}" ng-model="a.Value" ng-required="a.Required" /> 
      <span ng-show="profileAttributesForm['attribute_{{$index}}'].$invalid">Enter a Text</span> text : {{a.Value}} 
     </div> 

     <div ng-if="a.DataType == 4"> 
      <div combo list-id="a.LookUpList" name="attribute_{{$index}}" selected-item="a.Value" ng-required="a.Required"></div> 
      <span ng-show="profileAttributesForm['attribute_{{$index}}'].$invalid">lookup Required</span> Value from lookup: {{a.Value}} 
     </div> 
    </div> 
</form> 

Пример атрибутов ($ scope.attributes), который итерировать над в форме, я обеспечиваю его только для целей иллюстрации:

[{ 
    "AttributeID": 1, 
    "DataType": 4, 
    "NodeID": 0, 
    "Name": "Name", 
    "Description": null, 
    "LookUpList": 1, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": "1", 
    "Order": 1, 
    "Value": "" 
}, { 
    "AttributeID": 3, 
    "DataType": 1, 
    "NodeID": 0, 
    "Name": "Job Title", 
    "Description": null, 
    "LookUpList": 0, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": null, 
    "Order": 2, 
    "Value": "" 
}, { 
    "AttributeID": 4, 
    "DataType": 1, 
    "NodeID": 0, 
    "Name": "Email", 
    "Description": null, 
    "LookUpList": 0, 
    "SortAscending": false, 
    "Required": true, 
    "DefaultValue": null, 
    "Order": 3, 
    "Value": "" 
}] 

Answer 1

Для того, чтобы ngRequired установить его валидатор требуется установить ngModel на тот же элемент, чтобы получить NgModelController от него, иначе он просто включит или отключит требуемый атрибут, не затрагивая родительскую форму.

Состояние форм ($ pristine, $ valid и т. Д.) Не определяется его HTML , а зарегистрированными NgModelControllers. Контроллер добавляется автоматически, когда ngModel связан внутри формы.

• Например, это <input required type="text"> не повлияет на действительность форме, даже если это требуется, так как он не имеет ngModel, возложенные на него.
• Но этот <div ng-model="myDiv" required></div> будет влиять на него, так как он требуется, и ему назначен ngModel.

В вашем случае, я вижу два решения:

• простой один: перемещение ngRequired внутри combo и добавить его в тот же элемент, как ngModel; для этого вам также потребуется добавить новую переменную области видимости, например. isRequired

• комплекса один: добавить require: 'ngModel' к вашей директиве и внести соответствующие изменения для того, чтобы это работало. Таким образом, у вас будет больше контроля и гибкости. Например, что вы будете делать, если, в будущем, вы хотите добавить ngModelOptions в combo? Если вы не реализуете это решение, вам придется добавить его вручную.

  Вы можете начать чтение What's the meaning of require: 'ngModel'? - это отличный вопрос/ответ, который содержит различные примеры. Чтобы получить более подробное объяснение, посмотрите на Using NgModelController with Custom Directives.В качестве побочного примечания в Angular 1.5 они улучшили синтаксис require - см. $onInit and new "require" Object syntax in Angular components.