ng-class ($valid) в ng-repeat не работает с динамически загружаемыми формами через ng-include

$valid не работает с динамически загружаемыми формами через ng-include или я делаю ошибку (я не могу изменить стиль окна при проверке формы):

Вот плункер: http://plnkr.co/edit/WA5ohXoMrb5QcUdl0uwe?p=preview

Если поле ввода текста заполнено, цвет должен измениться с черного на зеленый.

введите здесь описание изображения

HTML

<body ng-controller="MainController">

  <div class="menu-mantle">
  <div ng-repeat="item in my.forms" class="menu-box">
      <div class="auWizard-default" ng-class="{
       'auWizard-valid': {{item.form_name}}.$valid,
       'auWizard-invalid': {{item.form_name}}.$invalid}">
      </div>
      <div class="menu-default" ng-click="my.getForm(item.form_name)">
        {{item.form_name}}
      </div>
    </div>
</div>

<h4>Forms will be included below:</h4>
<div class="form-area">
  <h5>{{my.src}}</h5>
  <ng-include src="my.src">
  </ng-include>
</div>
</body>

validation angularjs ng-class ng-repeat angularjs-ng-include
person Community    schedule 30.11.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Отслеживание текущего имени формы в контроллере с помощью

$scope.my.getForm= function (form) {
        $scope.currentform=form;
        $scope.my.src=form+".html";
      }

Я переместил тег <form> из отдельного файла в индексный файл, и теперь он работает.

     <form name={{currentform}}>
       <ng-include src="my.src">
      </ng-include>
     </form>

Рабочая ссылка на плункер

person rupesh_padhye    schedule 30.11.2015
comment
спасибо, но я сейчас, это работает. Полная форма должна быть (с тегами формы) во внешних файлах. Я пытаюсь поймать время загрузки формы1, формы2 и т.д. - person ; 30.11.2015
comment
@Вена, не могли бы вы рассказать подробнее. Я не понимаю ваше время загрузки - person rupesh_padhye; 30.11.2015
comment
в то время как $valid пытается выполнить проверку, на странице нет form1, она будет загружена позже, поэтому $valid не влияет на нее - person ; 30.11.2015
comment
Но это решение, может быть, мы делаем это таким образом, спасибо! - person ; 30.11.2015
comment
Недавно я наткнулся на этот github.com/Selmanh/angularjs-form-builder. вы можете поискать пользовательский конструктор форм - person rupesh_padhye; 30.11.2015

arrow_upward
0
arrow_downward

Попробуй это

<body ng-controller="MainController">

  <div class="menu-mantle">
  <div ng-repeat="item in my.forms" class="menu-box">
      <div class="auWizard-default" ng-class="{
       'auWizard-valid': isFormValid(item.form_name),
       'auWizard-invalid': !isFormValid(item.form_name)}">
      </div>
      <div class="menu-default" ng-click="my.getForm(item.form_name)">
        {{item.form_name}}
      </div>
    </div>
</div>

<h4>Forms will be included below:</h4>
<div class="form-area">
  <h5>{{my.src}}</h5>
  <ng-include src="my.src">
  </ng-include>
</div>
</body>

В вашем контроллере

$scope.isFormValid = function(formName){
 var formSelector = 'form[name='+formName+']';
 var formEle = $(formSelector);
 var formScope = angular.element(formEle).scope();
 if(formScope){
    return formScope[formName].$valid;
  }
 }
person Vivek    schedule 30.11.2015
comment
К сожалению, тот же эффект можно увидеть здесь: plnkr.co/edit/SGgO95lCZahCo4mbJHCb?p=preview . Как-то нет связи между именами форм.. - person ; 30.11.2015
comment
@Vienna Обновил мой ответ. Взглянуть. - person Vivek; 30.11.2015
comment
все еще не работает, форма 1 не существует на момент проверки, к сожалению.. - person ; 30.11.2015