Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular forms with ng-switch

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

like image 204
blackjid Avatar asked May 03 '13 21:05

blackjid


1 Answers

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>
like image 126
Michelle Tilley Avatar answered Oct 28 '22 08:10

Michelle Tilley