How to handle multiple forms present in a single page using AngularJS

Question

I am a newbie in AngularJS. I am having multiple forms on a single page which gets displayed based on the user selection only one at a time.

The DOM has two child controllers namely FirstFormController, SecondFormController wrapped under a parent controller named XceptionController. A parent controller function is used to submit the form data from both the children. The form data is saved on to the parent controller's scope.My HTML looks like below

<div ng-app="app">
 <div class="container" ng-controller="XceptionController">
<form class="form-container">
  <select id="select-form" ng-change=selectForm() ng-model="selectedForm">
    <option value="select" disabled selected>Select an Option</option>
    <option value="firstform">Get Firstname</option>
    <option value="secondform">Get Lastname</option>
  </select>
</form>

<div ng-controller="FirstFormController" class="firstform" ng-show="fname">
  <form name="firstnameform">
    <input type="text" name="firstname" ng-model="form.firstname" id="firstname">
    <label for="#firstname">Firstname</label>
  </form>
  <div class="content" ng-show="fname">
    <p>Firstname is {{form.firstname}}</p>
  </div>
</div>
<div ng-controller="SecondFormController" class="secondform" ng-show="lname">
  <form name="lastnameform">
    <input type="text" name="lastname" ng-model="form.lastname" id="lastname">
    <label for="#lastname">Lastname</label>
  </form>
  <div class="content" ng-show="lname">
    <p>Lastname is {{form.lastname}}</p>
  </div>
</div>
<button ng-click="submitForm(form)">Submit</button>

And my js looks like

var app = angular.module('app', []);
app.controller('XceptionController', function($scope){
    $scope.form = {};
    $scope.selectedForm = '';
    $scope.selectForm = function() {
    $scope.lname = 0;
    $scope.fname = 0;
    var foo = angular.element(document.querySelector('#select-form')).val();
    if(foo == 'firstform') {
        $scope.fname = 1;
    }
    else if(foo == 'secondform'){
        $scope.lname = '1';
    }
  };
 $scope.submitForm = function(form){
    //form data
    console.log(form);
 };
});

app.controller('FirstFormController', function($scope){
 $scope.firstname = "";
});

app.controller('SecondFormController', function($scope){
 $scope.lastname = "";
});

But on submitting the form I get the data from both the forms since I set it on the parent's scope. Is there a way by which I can submit the form and get the form data only for the form which is currently displayed. This fiddle will help you more in understanding my question. https://jsfiddle.net/xmo3ahjq/15/

Also help me in knowing if my code is properly written the way it should be or is there a better way to implement this. Should the form submission code be placed under a separate angular service ?

Answer 1

var app = angular.module('app', []);
app.controller('XceptionController', function($scope) {
  $scope.form = {};
  $scope.selectedForm = null;
  $scope.selectForm = function() {
    // reset the form model object
    $scope.form = {};
  };
  $scope.isSelected = function(formName) {
    return $scope.selectedForm === formName;
  };
  $scope.submitForm = function(form) {
    // form data
    console.log(form);
  };
});

app.controller('FirstFormController', function($scope) {

});

app.controller('SecondFormController', function($scope) {

});

<div ng-app="app">
  <div class="container" ng-controller="XceptionController">
    <form class="form-container">
      <select id="select-form" ng-change=selectForm() ng-model="selectedForm">
        <option value="" disabled selected>Select an Option</option>
        <option value="firstform">Get Firstname</option>
        <option value="secondform">Get Lastname</option>
      </select>
    </form>

    <div ng-controller="FirstFormController" class="firstform" ng-show="isSelected('firstform')">
      <form name="firstnameform">
        <input type="text" name="firstname" ng-model="form.firstname" id="firstname">
        <label for="#firstname">Firstname</label>
      </form>
      <div class="content">
        <p>Firstname is {{form.firstname}}</p>
      </div>
    </div>
    <div ng-controller="SecondFormController" class="secondform" ng-show="isSelected('secondform')">
      <form name="lastnameform">
        <input type="text" name="lastname" ng-model="form.lastname" id="lastname">
        <label for="#lastname">Lastname</label>
      </form>
      <div class="content">
        <p>Lastname is {{form.lastname}}</p>
      </div>
    </div>
    <button ng-click="submitForm(form)">Submit</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>