Проверка формы доступа извне

0

Я новичок в angular.I имеет форму, которая имеет валидацию, которые позволяют кнопку сохранения только на валидации

<input type="submit" value="Save" ng-disabled="!frmRegister.$valid" />

У меня есть директива, которая позаботится о подаче формы во всем мире.

app.directive('mysavebtn',function(){
            return {                
                restrict : "E",
                scope :{
                },
                controller : function($scope){

                },
                link : function(scope,elem,attr){

                },
                template : '<div style="clear:both;" >'
                 +'<input type="submit" ng-disabled="!frmRegister.$valid" value="Directive Save"  />'
           +'</div>'
            }
        });

Но кнопка сохранения директивы всегда отключается, даже если форма действительна !!!. Примечание. Я сохраняю кнопку сохранения внутри формы, чтобы узнать подтверждение

Пожалуйста, проверьте здесь, в рабочем примере

Как получить доступ к проверке формы из директивы mysavebtn? Пожалуйста посоветуй.

Теги:

2 ответа

2
Лучший ответ

Если вы используете изолированную область внутри своей директивы, вы можете передать состояние действительности в этой области, используя обозначение "=" (двусторонняя привязка). Для этого вам нужно немного изменить HTML своей директивы:

<mysavebtn form-valid="frmRegister.$valid"></mysavebtn>

а также JS:

app.directive('mysavebtn', function() {
  return {
    restrict: "E",
    scope: {
      formValid: "="
    },
    controller: function($scope) {

    },
    link: function(scope, elem, attr) {

    },
    template: '<div style="clear:both;" >' + '<input type="submit" ng-disabled="!formValid" value="Directive Save"  />' + '</div>'
  }
});

Теперь состояние действительности формы доступно внутри шаблона директивы через переменную formValid. См. Рабочий PLNK. Для получения более подробной информации читайте Угловое директива руководства.

1

Одним из рекомендуемых способов между директивного общения и передовой практикой является использование require, чтобы получить доступ к другому контроллеру директивы (form директивы в данном случае).

Я изменил ваш plnkr: http://plnkr.co/edit/rGxmu7M33Ftb52MobzdK?p=preview

app.directive('mysavebtn', function () {
  return {              
    restrict: 'E',
    require: '^form',
    scope: {},
    link: function(scope, elem, attrs, formCtrl) {
      scope.formCtrl = formCtrl;
    },
    template: '<div style="clear:both;">' +
      '<input type="submit" ng-disabled="!formCtrl.$valid" value="Directive Save"  />' +
    '</div>'
  }
});

Поместите ваш mysavebtn в form чтобы он имел к нему доступ. Теперь у вас есть доступ к API всей form и возможности гораздо больше.

BTW: Создание привязки для этого необязательно (как в уже принятом другом ответе).

Ещё вопросы

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