本文介绍了ng-rep内部的ng-form,ng-repeat外部的Submit按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有此代码:
<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>
控制器:
// 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;
}
};
问题是我只能验证ng-repeat和ng-form内的表单输入,并且我需要在该html块之外触发事件,也许我只是菜鸟(第一次使用angular1验证).我将不胜感激.预先感谢.
The problem is I can only validate the form inputs inside ng-repeat and ng-form, and I need to trigger the event outside of that html block, maybe I'm just being noob (first time using angular1 validations). I will appreciate some help. Thanks in advance.
推荐答案
基于您的评论,并遵循为ng-repeat中的每个元素生成表单的相同目标,这应该是答案:
Based on you comment and following the same goal of generating a form for each element in your ng-repeat, this should be the answer:
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>
控制器
// 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;
}
};
这篇关于ng-rep内部的ng-form,ng-repeat外部的Submit按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!