Javascript ng表格在ng repeat内,提交按钮在ng repeat外
我有以下代码:Javascript ng表格在ng repeat内,提交按钮在ng repeat外,javascript,angularjs,validation,angularjs-ng-repeat,angularjs-ng-form,Javascript,Angularjs,Validation,Angularjs Ng Repeat,Angularjs Ng Form,我有以下代码: <div class="row" ng-repeat="input in inputs | filter:inputNumber"> <ng-form name="form1"> <div class="col-xs-3"> <div class="form-group"> <input ng-model="inputs.number[$ind
<div class="row" ng-repeat="input in inputs | filter:inputNumber">
<ng-form name="form1">
<div class="col-xs-3">
<div class="form-group">
<input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required />
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small>
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small>
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>
</div>
</div>
</ng-form>
</div>
<button data-ng-click="add(form1)" class="btn-add" style="padding-left: 40%;"></button>
问题是我只能验证ng repeat和ng form中的表单输入,并且我需要在html块之外触发事件,也许我只是一个noob(第一次使用angular1验证)。我会感谢你的帮助。提前感谢。基于您的评论,并遵循为ng repeat中的每个元素生成表单的相同目标,以下应该是答案: html
<form name="generalForm"> <!-- this form will be valid if all sub-forms are valid-->
<div class="row" ng-repeat="input in inputs | filter:inputNumber">
<ng-form name="form1">
<div class="col-xs-3">
<div class="form-group">
<input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required />
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small>
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small>
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>
</div>
</div>
</ng-form>
</div>
<button data-ng-click="add(generalForm)" class="btn-add" style="padding-left: 40%;"></button>
</form>
但此代码生成名为“form1”的N个表单,其中N是ng repeat(
输入
)中的项数。您无法验证form1
,因为form1
有许多表单(它们都具有相同的名称)。如果我错了,请纠正我,我可以帮助你。你想只在所有表单都有效的情况下提交表单吗?是的@Asiel,这会生成同名表单,我可以使用$index使名称动态,但是当在ng-repeat之外单击提交时,我需要验证所有表单。为什么不将表单
标记放在当前表单的整个集合上,使其成为一个带有单个submit@cale_b因为这将在验证之前向数组添加无效输入。我很乐意提供帮助;)
<form name="generalForm"> <!-- this form will be valid if all sub-forms are valid-->
<div class="row" ng-repeat="input in inputs | filter:inputNumber">
<ng-form name="form1">
<div class="col-xs-3">
<div class="form-group">
<input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required />
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small>
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small>
<small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>
</div>
</div>
</ng-form>
</div>
<button data-ng-click="add(generalForm)" class="btn-add" style="padding-left: 40%;"></button>
</form>
// Form add handler.
$scope.add = function(form) {
// Trigger validation flag.
$scope.submitted = true;
// If form is invalid, return and let AngularJS show validation errors.
if (form.$invalid) {
console.log('invalid');
return;
} else {
var newItemNo = $scope.inputs.length + 1;
var inputs = { 'id': 'input' + newItemNo }
$scope.inputs.push(inputs);
$scope.isDisabled = false;
}
};