AngularJS - form inside ng-repeat undefined in controller

Question

I'm trying to access form object in my controller. Form lies inside ng-repeat block it has got its dynamic name and I should be able to access it since v1.3.

js:

var app = angular.module('app', []);
app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.forms = [0];
  $scope.testForm = function() {
    if($scope.form0 == undefined) {
      $scope.test = 'Form is NOT defined';
    } else {
      $scope.test = 'Form is defined';
    }
  }
}])

html:

<body ng-app="app">
  <div ng-controller="AppCtrl">
    <div ng-repeat="form in forms" ng-init="formName = 'form' + $index">
      form name should be {{formName}}
      <form name="{{formName}}">
        <input type="text" name="field" />
      </form>
    </div>
  <button ng-click="testForm()">Check if form exists</button>
  <p ng-bind="test"></p>
  </div>
</body>

But in my controller $scope.form0 is undefined - after clicking "Check if form exists" I get "Form is NOT defined" message. Even if I give it a static name (<form name="form0">) I still keep getting undefined. When I take form out of the ng-repeat loop, it works fine.

Any idea why it is not set?

The example above: https://plnkr.co/edit/Fvy5LdIO0H1vCS9wYR0U?p=preview

Thanks in advance!

MMhunter · Accepted Answer · 2016-08-12 02:56:27Z

3

This is because ng-repeat is creating isolated child scopes, the form0 is in the child scope and not visible from the parent (the controller's scope).

So the solution is to pass it to the parent. However we cannot do it in ng-init since the form controller is not initialised by that time.

One approach I could think of is having a custom directive to bind the formController to a specified scope.

app.directive("form",function($parse){
  return{
    restrict:"E",
    priority:-1,
    link:function(scope,ele,attrs){
      var targetScope = $parse(attrs.bindToScope)(scope);
      if(targetScope){
        targetScope[attrs.name] = scope[attrs.name];
      }
    }
  }
})

and with this we can tell the form to bind the controller to the scope we specified.

<form name="{{formName}}" bind-to-scope='$parent' >
     <input type="text" name="field" />
</form>

edited Aug 12, 2016 at 2:56

answered Aug 12, 2016 at 2:26

MMhunter

1,4511 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - form inside ng-repeat undefined in controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest