Search code examples
angularjsvalidationangularjs-ng-repeatng-classangularjs-ng-include

ng-class ($valid) within ng-repeat does not work on dynamically loaded forms via ng-include

$valid does not work on dynamically loaded forms via ng-include or I do a mistake (I can't change the style of the Box on form validation):

Here is the plunker: http://plnkr.co/edit/WA5ohXoMrb5QcUdl0uwe?p=preview

If the text input field is filled, the color should be changed from black to green.

enter image description here

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>
Solution

  • Tracking current Form name in controller by 

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

    I moved <form> tag from individual file to index file and it is working now.

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

    Working plunker link