【发布时间】：2016-07-31 11:07:06
【问题描述】：
我正在构建一个示例 webshop 应用程序来学习 angularjs。在实际的学习步骤中，我正在使用送货地址和账单地址的表单来实现视图。视图上有两种形式。一个用于送货地址，一个用于帐单地址。作为标准，帐单地址与送货地址相同。只有当用户单击“更改帐单地址”按钮时，他才能选择为帐单选择另一个地址。这里我有两个问题：
1) 当我在“orderAddressForm”表格中输入送货地址，然后点击“更改帐单地址”时，第二个表格“orderBillingAddressForm”正确显示。但是当我在这里输入一些东西时，第一个表单“orderAddressForm”的输入也发生了变化。为什么会这样？两种形式都绑定了不同的变量？？？
2) 当我单击“提交”按钮时，不会发生验证。我希望在我点击这个“提交”按钮后，每一个看到的表单都得到验证。
这里是 plunkr 链接：Plunkr Link
index.html
<!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>
controller.js
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
【问题讨论】：
-
使用两种形式的概念是错误的。浏览器只能提交一个表单，验证只会在实际提交的一个表单上进行
标签： javascript angularjs html forms