Angular ng-required не работает с пользовательской директивой

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

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

Однако он не работает с пользовательской директивой, которая отображает комбо. Комбинация извлекает элементы на основе переданного ей параметра с именем «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: перебирает атрибуты, которые содержат тип элемента управления для отображения, затем устанавливает ng-required в логическое значение на основе атрибута «attribute.Required», который является истинным.

<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": ""
}]

angularjs angularjs-directive required-field angularjs-forms
person Hussein Salman    schedule 27.03.2016    source источник

Ответы (1)


arrow_upward
8
arrow_downward

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

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

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

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

person Cosmin Ababei    schedule 27.03.2016
comment
Спасибо @Космин. Можете ли вы предоставить ссылку или пример сложного решения, в котором подробно описано, как его реализовать? - person Hussein Salman; 28.03.2016
comment
@h.salman Конечно! Я отредактировал свой ответ и добавил несколько статей, которые могут вам помочь. - person Cosmin Ababei; 28.03.2016