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

0

Я пытаюсь создать директиву AngularJS, которая должна винифицировать форму. Форма имеет два входа. Действительным случаем является то, что вменения либо пусты, либо оба заполнены любым строковым значением.

<form name="recipientsForm" novalidate>
    <md-input-container>
        <label>Name</label>
        <input name="name" type="text" ng-model="relationship.name">
    </md-input-container>
    <md-input-container>
        <md-select name="type" placeholder="Select your relation... " ng-model="relationship.relationshipType">
            <md-option ng-repeat="type in relationshipTypes" value="{{type.relationshipType}}">
                {{type.name}}
            </md-option>
        </md-select>
    </md-input-container>
</form>

Дивергенция должна быть общей для других форм с такой валидацией.

Мой подход кажется неработоспособным:.html:

<form name="recipientsForm" novalidate>
    <md-input-container>
        <label>Name</label>
        <input name="name" type="text" ng-model="relationship.name" value="" empty-or-both-filled="relationship.relationshipType">
        <div ng-messages="recipientsForm.name.$error">
            <div ng-message="emptyOrBothFilled">Enter name.</div>
        </div>
    </md-input-container>
    <md-input-container>
        <md-select name="type" placeholder="Select your relation... " ng-model="relationship.relationshipType" empty-or-both-filled="relationship.name">
            <md-option ng-repeat="type in relationshipTypes" value="{{type.relationshipType}}">
                {{type.name}}
            </md-option>
        </md-select>
        <div ng-messages="recipientsForm.type.$error">
            <div ng-message="emptyOrBothFilled">Pick relationship.</div>
        </div>
    </md-input-container>
</form>

.js файл:

(function () {
    'use strict';

    angular
        .module('app')
        .directive('emptyOrBothFilled', [emptyOrBothFilled]);

    function emptyOrBothFilled() {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                targetNgModel: '=emptyOrBothFilled'
            },
            link: function($scope, element, attrs, ngModel) {
                ngModel.$validators.emptyOrBothFilled = function(val) {
                    console.log($scope.targetNgModel);
                    return (!val && !$scope.targetNgModel) || (!!val && !!$scope.targetNgModel);
                }

                $scope.$watch('targetNgModel', function() {
                    ngModel.$validate();
                })
            }
        }
    }
})();
Теги:
angularjs-directive

1 ответ

0

Альтернативный подход с использованием ng-disabled и ng-required:

<form name="recipientsForm" novalidate>
    <md-input-container>
        <label>Name</label>
        <input name="name" type="text" ng-model="relationship.name">
        <div ng-messages="recipientsForm.name.$error">
            <div ng-message="emptyOrBothFilled">Enter name.</div>
        </div>
    </md-input-container>
    <md-input-container>
        <md-select name="type" placeholder="Select your relation... " ng-model="relationship.relationshipType" ng-disabled="relationship.name" ng-required="relationship.name">
            <md-option ng-repeat="type in relationshipTypes" value="{{type.relationshipType}}">
                {{type.name}}
            </md-option>
        </md-select>
    </md-input-container>
</form>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню