Angular forms with ng-switch

angularjs, forms, javascript, ng-switch

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 `ngSwitch`es 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>

Problem

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

Original source