【发布时间】：2018-08-04 08:05:30
【问题描述】：
我想使用 Angular.JS 验证订单。
表单根据产品的数量动态添加输入字段。
动态添加的输入字段用于确定用户想要购买的产品数量。
我希望表单验证任一字段的值是否最小为 1（用户必须至少选择一种产品才能发送表单）。
我遇到的问题是我无法弄清楚条件验证“如果一个字段的值大于 0，则表单有效”。
如果我将min='1' 作为输入字段的属性，则两个字段的值都必须为 1 才能使表单正常工作。
如果我有placeholder="0"，则输入字段有一个值，因此只要其他字段有效，就会验证表单。
我不知道如何实现（或者它是否聪明）的想法是检查产品总和是否大于 0。
显然我是一个新手，并且在网上使用大量资源来实现我想要的功能。
HTML
<form id="orderForm" name="orderForm" role="form" ng-submit="submitForm(orderForm.$valid)" class="orderForm" ng-controller="formController as formCtrl" novalidate>
<table class="table">
<thead>
<tr>
<th scope="col">Produkt</th>
<th scope="col">Antal</th>
<th scope="col" class="text-right">Pris</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in formCtrl.products">
<td>
<img ng-src="{{product.images.thumb}}" alt="{{product.name}}">
<h6 class="d-inline-block">{{product.name}} <small class="d-block">{{product.description}}</small></h6>
</td>
<td>
<input type="number" class="form-control" ng-model="product.quantity" name="{{'quantity' + product.productId}}" min="0" max="99" required>
</td>
<td class="text-right">
{{product.price | currency : "SEK"}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">
<h5 class="d-inline-block">Totalt: <em ng-bind="sumCalc(product.price) | currency : 'SEK'"></em></h5>
</td>
</tr>
</tfoot>
</table>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="inputEmail">Email</label>
<input name="email" ng-model="formCtrl.email" type="email" class="form-control" id="inputEmail" placeholder="Email" required>
<div ng-show="orderForm.email.$invalid && !orderForm.email.$pristine" class="invalid-feedback">
Vänligen fyll i en korrekt email
</div>
</div>
<div class="col-md-4 mb-3">
<label for="inputFirstName">Förnamn</label>
<input name="firstname" ng-model="formCtrl.fName" type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required>
<div ng-show="orderForm.fName.$invalid && !orderForm.fName.$pristine" class="invalid-feedback">
Vänligen fyll i ditt förnamn
</div>
</div>
<div class="col-md-4 mb-3">
<label for="inputLastName">Efternamn</label>
<input name="lastname" ng-model="formCtrl.lName" type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required>
<div ng-show="orderForm.lName.$invalid && !orderForm.lName.$pristine" class="invalid-feedback">
Vänligen fyll i ditt efternamn
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="inputStreet">Gatuadress</label>
<input name="street" ng-model="formCtrl.street" type="text" class="form-control" id="inputStreet" placeholder="Gatuadress" required>
<div ng-show="orderForm.street.$invalid && !orderForm.street.$pristine" class="invalid-feedback">
Vänligen fyll i din gatuaddress
</div>
</div>
<div class="col-md-4 mb-3">
<label for="inputZip">Postnr</label>
<input name="zip" ng-model="formCtrl.zip" type="text" class="form-control" id="inputZip" placeholder="Postnummer" required>
<div ng-show="orderForm.zip.$invalid && !orderForm.zip.$pristine" class="invalid-feedback">
Vänligen fyll i ditt postnummer
</div>
</div>
<div class="col-md-4 mb-3">
<label for="inputTown">Stad</label>
<input name="town" ng-model="formCtrl.town" type="text" class="form-control" id="inputTown" placeholder="Stad" required>
<div ng-show="orderForm.town.$invalid && !orderForm.town.$pristine" class="invalid-feedback">
Vänligen fyll i din stad
</div>
</div>
</div>
<div> orderForm is {{orderForm.$valid}}</div>
<div class="form-group">
<button type="submit" class="btn btn-default" id="inputSubmitButton" ng-disabled="orderForm.$invalid && inputQuantity.">Skicka</button>
</div>
</form>
controllers.js
var app = angular.module('controllers', []);
app.controller('formController', function($scope) {
this.products = product;
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
$scope.sumCalc = function() {
var sum = 0;
angular.forEach(product, function(product, index) {
sum += parseInt(product.quantity, 10) * product.price;
});
return sum;
//totalPrice = sum;
};
});
var product = [{
name: 'asd',
productId: 01,
price: 100,
description: 'asd',
specification: "asd",
images: {
full: 'asd',
thumb: 'asd'
},
quantity: 0
},
{
name: "asd",
productId: 02,
price: 100,
description: "asd",
specification: "asd",
images: {
full: 'asd',
thumb: 'asd'
},
quantity: 0
}
];
var app = angular.module('controllers', []);
app.controller('formController', function($scope) {
this.products = product;
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
$scope.sumCalc = function() {
var sum = 0;
angular.forEach(product, function(product, index) {
sum += parseInt(product.quantity, 10) * product.price;
});
return sum;
//totalPrice = sum;
};
});
var product = [{
name: 'asd',
productId: 01,
price: 100,
description: 'asd',
specification: "asd",
images: {
full: 'asd',
thumb: 'asd'
},
quantity: 0
},
{
name: "asd",
productId: 02,
price: 100,
description: "asd",
specification: "asd",
images: {
full: 'asd',
thumb: 'asd'
},
quantity: 0
}
];
【问题讨论】：
标签： angularjs forms validation input numbers