如何使用AngularJS处理单个页面中存在的多种表单 [英] How to handle multiple forms present in a single page using AngularJS

问题描述

我是AngularJS的新手.我在一个页面上有多个表单，但一次只能根据用户选择显示一个表单.

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.

DOM具有两个子控制器，分别是 FirstFormController，SecondFormController ，包装在名为 XceptionController 的父控制器下. 父控制器功能用于从两个孩子提交表单数据.表单数据保存到父控制器的作用域中.我的HTML如下图所示

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>

我的js看起来像

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 = "";
});

但是在提交表单时，由于我将数据设置在父级的作用域上，因此我从这两个表单中都获取了数据.有没有一种方法可以提交表单并仅获取当前显示的表单的表单数据.这个小提琴将帮助您更多地了解我的问题. https://jsfiddle.net/xmo3ahjq/15/

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 ?

推荐答案

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>

这篇关于如何使用AngularJS处理单个页面中存在的多种表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！