在函数内使用angularJS验证输入
Validating input using angularJS inside a function
我的代码是这样的。
<form name="palletForm" novalidate=novalidate>
<div ng-app='myApp' ng-controller="MainCtrl">
<!--Small Package starts here -->
<div ng-repeat="prdElement in packageElement track by $index" class="package-grid">
<table class="hovertable">
<thead>
<tr>
<th>Line Quantity#</th>
<th>Ship Quantity</th>
<th>PickQuantity</th>
<th>Quantity in Plt</th>
<th>Allready Packed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = 0">
<td>{{data.LINQTY}}</td>
<td>{{data.SHPQTY}}</td>
<td>{{data.PickQty}}</td>
<td>
<input ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
</td>
<td>{{data.SHPQTY}}</td>
</tr>
<tr>
<td width="100%" colspan="4">
<button ng-show="prdElement.show" type="button" ng-click="newPackageItem( prdElement,$event)">Finish Package</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--Small Package ends here -->
</div>
angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var counter = 0;
$scope.packageElement = [{
show: true,
palletClosed: false,
disableNextPallet: false,
Data: [{
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "021041029300",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 1000,
"Qtyplt": 0,
"packed": 0
}, {
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "4901000002201",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 2000,
"Qtyplt": 0,
"packed": 0
}]
}];
$scope.newPackageItem = function (packageElement, $event) {
var npackageElement = {};
angular.copy(packageElement, npackageElement);
counter++;
packageElement.show = false;
npackageElement.name = counter;
angular.forEach(npackageElement.Data, function (row) {
if (row.PickQty != row.newquantity || row.PickQty != 0) {
row.PickQty = row.PickQty - row.newquantity;
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
}
});
npackageElement.show = true;
angular.forEach(packageElement.Data, function (row) {
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
});
$scope.packageElement.push(npackageElement);
};
}]);
点击内部按钮我正在调用一个函数newPackageItem
,我想在该函数执行之前验证我的文本框。textbox是仅限数字的字段,并且是必需的。我想用角度的方式来验证它。我怎样才能做到这一点?
Fiddle
<body ng-app="phonecatApp">
<form ng-controller="PhoneListCtrl" name="myForm">
<p>
<input name="Quantity" ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
<span class="error" ng-show="myForm.Quantity.$error.pattern">
</span>
</p>
</form>
</body>
以及在您的javascript文件中
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.pattern = /^[0-9]*$/;
});
下面是我上传到jsfiddle的一个验证示例:
http://jsfiddle.net/sfk1bu1y/1/
AngularJS表单验证是您的朋友:
https://docs.angularjs.org/guide/forms
相关文章:
- 使用angularjs验证文本框中的电子邮件
- 使用正则表达式angularjs验证文件路径
- 如何在JavaScript而不是HTML元素中设置AngularJS验证
- 为什么Angularjs验证don't与输入[type=“number”]一起工作
- 如何从表单标签外部的按钮手动触发 AngularJS 验证
- 想要使用Angularjs验证而不是浏览器验证
- 通过点击表单外的按钮,使用required和angularjs验证输入字段
- AngularJS验证不起作用
- 在 Angularjs 验证为真后,进行普通表单提交
- ng-repeat中的AngularJS验证没有触发
- AngularJS验证和承诺
- AngularJS / 验证电子邮件唯一性时的奇怪行为
- Angularjs:验证带有或不带有表单的指令组件
- 带有自定义输入框的 AngularJS 验证方法
- AngularJS验证ng-valid类仅在提交后
- AngularJS验证引用具有变量名称的表单对象
- angularjs验证输入,并在无效时阻止更改
- HTML5输入日期的AngularJS验证
- 在函数内使用angularJS验证输入
- 如何使用angularjs验证日期和时间