Javascript 仅用一个按钮在页面上提交两个表单

我正在构建一个示例webshop应用程序来学习angularjs。在实际的学习步骤中，我正在使用装运地址和账单地址的表单实现视图。视图上有两种形式。一个用于发货地址，一个用于账单地址。作为标准，账单地址与发货地址相同。只有当用户点击“更改账单地址”按钮时，他才有权选择账单的其他地址。我有两个问题：

1） 当我在表单“orderAddressForm”中输入发货地址，然后单击“更改账单地址”时，第二个表单“orderBillingAddressForm”正确显示。但是当我在这里输入一些东西时，第一个表单“orderAddressForm”的输入也会改变。为什么会这样？两种形式都绑定到不同的变量

2） 当我点击按钮“提交”按钮时，没有验证发生。我希望看到的每一个表单都在我点击这个“提交”按钮后被验证

以下是plunkr链接：

index.html 我希望你能帮助我

提前感谢,

YB

您可以使用“ng form”来组织表单，只需在末尾添加一个按钮，该按钮将调用您使用的“submit（）”函数

<div ng-form="form1">
 form1 fields
</div>

<div ng-form="form2">
 form2 fields
</div>

<button ng-click="submit()"></button>

表格1字段
表格2字段

因为您在此处将shippingAddress分配给BillingAddress，所以不应该这样做

 $scope.setBillingAddress = function (){
   $scope.changeBillingAddress = true;
   //$scope.billingAddress = $scope.shippingAddress;
 };

你可以这样做

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;

     $scope.confirmBillingEqualsShipping = true;
     $scope.changeBillingAddress = false;

     $scope.shippingAddress = {};
     $scope.billingAddress = {};

     $scope.setBillingAddress = function (){
       $scope.changeBillingAddress = true;
         $scope.billingAddress = {
           salutation: $scope.shippingAddress.salution,
           prename: $scope.shippingAddress.prename,
           surname: $scope.shippingAddress.surname
         };
     };

     $scope.cancelBillingAddress = function (){
       $scope.changeBillingAddress = false;
         //$scope.billingAddress = $scope.shippingAddress;
     };

     $scope.openCompanyModal = function (company){
         $scope.billingAddress = company;
         $scope.shippingAddress = company;
     };

    $scope.submit = function (){

      if (!$scope.changeBillingAddress) {
        // setting shipping and billing address same should be here         
        $scope.billingAddress = $scope.shippingAddress;
      }
      console.log($scope.shippingAddress);
      console.log($scope.billingAddress);
      console.log("Form submitted");
    }
});

某物
.... 某物
//在JS中
单击#btn1，调用/执行两个表单的函数（直接）

使用两种表单的概念是错误的。浏览器只能提交一个表单，并且仅对实际提交的一个表单进行验证。我用angular.copy修复了它。但是你的回答帮助我找到了正确的方法

 $scope.setBillingAddress = function (){
   $scope.changeBillingAddress = true;
   //$scope.billingAddress = $scope.shippingAddress;
 };

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;

     $scope.confirmBillingEqualsShipping = true;
     $scope.changeBillingAddress = false;

     $scope.shippingAddress = {};
     $scope.billingAddress = {};

     $scope.setBillingAddress = function (){
       $scope.changeBillingAddress = true;
         $scope.billingAddress = {
           salutation: $scope.shippingAddress.salution,
           prename: $scope.shippingAddress.prename,
           surname: $scope.shippingAddress.surname
         };
     };

     $scope.cancelBillingAddress = function (){
       $scope.changeBillingAddress = false;
         //$scope.billingAddress = $scope.shippingAddress;
     };

     $scope.openCompanyModal = function (company){
         $scope.billingAddress = company;
         $scope.shippingAddress = company;
     };

    $scope.submit = function (){

      if (!$scope.changeBillingAddress) {
        // setting shipping and billing address same should be here         
        $scope.billingAddress = $scope.shippingAddress;
      }
      console.log($scope.shippingAddress);
      console.log($scope.billingAddress);
      console.log("Form submitted");
    }
});

<form id='form1'>
  ....something
</form>

<form id='form2'>
  .... something
</form>

<div id='btnDiv'>
  <button id='btn1' ng-click="Submit-Forms">
</div>

//in JS
On click of #btn1, invoke/execute the functions (directly) of the two forms