我正在构建一个示例webshop应用程序来学习angularjs。在实际的学习步骤中，我正在实施带有送货地址和帐单地址表单的视图。视图上有两种形式。一个用于送货地址，另一个用于帐单地址。作为标准，帐单邮寄地址与送货地址相同。只有当用户点击“更改帐单地址”按钮时，他才能选择另一个帐单地址。我有两个问题：
1）当我以“orderAddressForm”形式输入送货地址，然后点击“更改帐单地址”时，第二种形式“orderBillingAddressForm”会正确显示。但是当我在这里放入一些东西时，第一种形式“orderAddressForm”的输入也会改变。为什么会这样？两种形式都绑定到不同的变量???
2）当我点击“提交”按钮按钮时，没有发生验证。我想在点击这个“提交”按钮后，每个看到的表单都会被验证。
以下是plunkr链接：Plunkr Link
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"
/>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x"
src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Shipping address</label>
</h3>
</div>
</div>
<form name="orderAddressForm" ng-submit="submit()">
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-
model="shippingAddress.salutation" required="" class="form-
control">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="(orderAddressForm.salutation.$dirty &&
submitted) && orderAddressForm.salutation.$error.required">
</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-
model="shippingAddress.prename" required="" class="form-
control" />
<span ng-show="(orderAddressForm.prename.$dirty && submitted)
&& orderAddressForm.prename.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-
model="shippingAddress.surname" required="" class="form-
control" />
<span ng-show="(orderAddressForm.surname.$dirty && submitted)
&& orderAddressForm.surname.$error.required"></span>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<div class="row">
<h3 class="form-group">
<label>Billing address</label>
<button ng-click="setBillingAddress()" ng-
show="changeBillingAddress === false" class="btn btn-default
pull-right">Change billingaddress</button>
<button ng-click="cancelBillingAddress()" ng-
show="changeBillingAddress === true" class="btn btn-danger
pull-right">Cancel</button>
</h3>
</div>
<div ng-show="changeBillingAddress === false" class="row">
<div class="col-md-offset-1">Identisch mit Lieferadresse</div>
</div>
<div ng-show="changeBillingAddress === true" class="row">
<div style="margin-top: 5px">
<form name="orderBillingAddressForm" ng-submit="submit()">
<div class="row">
<div ng-class="{ 'has-error' : billingSubmitted &&
orderBillingAddressForm.salutation.$invalid}" class="form-
group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-
model="billingAddress.salutation" required=""
class="form-control">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<p ng-show="orderBillingAddressForm.salutation.$invalid &&
!orderBillingAddressForm.salutation.$pristine &&
billingSubmitted" class="help-block">Pflichtfeld</p>
</div>
</div>
</div>
<div class="row">
<div ng-class="{ 'has-error' : billingSubmitted &&
orderBillingAddressForm.prename.$invalid}" class="form-
group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-
model="billingAddress.prename" required="" class="form-
control" />
<p ng-show="orderBillingAddressForm.prename.$invalid &&
!orderBillingAddressForm.prename.$pristine &&
billingSubmitted" class="help-block">Pflichtfeld .row</p>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-
model="billingAddress.surname" required="" class="form-
control" />
<span ng-show="(orderBillingAddressForm.surname.$dirty &&
submitted) &&
orderBillingAddressForm.surname.$error.required"></span>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div style="padding-top: 1em">
<button type="submit" class="btn btn-default pull-
right">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;
$scope.confirmBillingEqualsShipping = true;
$scope.changeBillingAddress = false;
$scope.shippingAddress = {};
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.cancelBillingAddress = function (){
$scope.changeBillingAddress = false;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.openCompanyModal = function (company){
$scope.billingAddress = company;
$scope.shippingAddress = company;
};
$scope.submit = function (){
console.log("Form submitted");
}
});
我希望你能帮助我。
先谢谢，
YB
答案 0 :(得分：0)
您可以使用＆＃34; ng-form＆＃34;用于组织表单，只需在末尾添加一个按钮即可调用“提交”（）＆＃39;你使用的功能。
<div ng-form="form1">
form1 fields
</div>
<div ng-form="form2">
form2 fields
</div>
<button ng-click="submit()"></button>
答案 1 :(得分：0)
<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
答案 2 :(得分：-1)
由于您在此处将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");
}
});