Angular forms with ng-switch

StackOverflow https://stackoverflow.com/questions/16367778

Question

I'm trying to get a form object from the scope of a controller when I get a name to de form. It work fine, but if I create the form with a ng-switch, the form never shows in the scope.

the view

<body ng-controller="MainCtrl">

    <div ng-switch on="type">
      <form name="theForm" ng-switch-when="1">
        <label>Form 1</label>
        <input type="text"/>
      </form>
      <form name="theForm" ng-switch-when="2">
        <label>Form 2</label>
        <input type="text"/>
        <input type="text"/>
      </form>

    </div>

    <button ng-click="showScope()">Show scope</button>
</body>

the controller

app.controller('MainCtrl', function($scope) {
  $scope.type = 1;

  $scope.showScope = function(){
    console.log($scope);
  };
});

If I remove the ng-switch I can see the property "theForm" from the $scope as the form obj.

Any idea how to do it. I don't want to have the two forms with different names and use ng-show.

Here is the example "not-working" http://plnkr.co/edit/CnfLb6?p=preview

Was it helpful?

Solution

This is because ngSwitch creates new scope. (If you look at the $$childHead value of the scope that get's console.log'd, you can see theForm inside it. This is the ngSwitch scope).

If the form will always be the same name, you can simply put the ngSwitches inside the form:

<form name="theForm">
  <div ng-switch on="type">
    <div ng-switch-when="1">
      <label>Form 1</label>
      <input type="text"/>
    </div>
    <div ng-switch-when="2">
      <label>Form 2</label>
      <input type="text"/>
    </div>
  </div>
</form>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top