ng-repeat 内的 ng-form 不更新子表单。$submitted
ng-form inside ng-repeat not updating subform.$submitted
我正在尝试在 ng-repeat 中创建表单,除提交按钮外一切正常。提交按钮放置在主窗体中,它对所有子窗体都是通用的。
如果单击提交按钮,mainForm.$submitted
会更新,但 userForm.$submitted
不会更改。有什么解决办法吗?
angular.module("sampleApp", [])
.controller('sampleCtrl', function($scope) {
$scope.users = [{},{}];
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="sampleApp" ng-controller="sampleCtrl">
<form name="mainForm" novalidate>
<input type="text" name="school" ng-model="school" required>
main form input valid=>{{mainForm.school.$valid}}
<div ng-repeat="user in users">
<ng-form name="userForm">
<input type="text" ng-model="user.name" name="name" required>
sub form input valid=>{{userForm.name.$valid}} | sub form submit=>{{userForm.$submitted}}
</ng-form>
</div>
<button type="submit">Submit</button>
Form valid=>{{mainForm.$valid}} | Main From submit => {{mainForm.$submitted}}
</form>
</div>
简介
因此,我向按钮添加了一个 ng-click
处理程序,以便您也可以设置内部表单的提交状态。
我遇到的唯一困难是实际获取表单引用,但我添加了使用 ng-init
调用的函数 $scope.setUserForm
。解模式来自:
此外,请记住您需要一组用户表单来保存引用。单击您遍历这些元素并设置已提交。
代码
angular.module("sampleApp", [])
.controller('sampleCtrl', function($scope) {
$scope.UserForms = [];
$scope.setUserForm = function(form) {
$scope.UserForm = form;
$scope.UserForms.push(form);
}
$scope.forms = {};
$scope.users = [{}, {}];
$scope.handleClick = function() {
$scope.UserForms.forEach(function(element) {
element.$submitted = true;
});
};
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="sampleApp" ng-controller="sampleCtrl">
<form name="mainForm" novalidate>
<input type="text" name="school" ng-model="school" required>
input valid=>{{mainForm.school.$valid}}
<div ng-repeat="user in users">
<ng-form name="userForm">
<div ng-init="setUserForm(userForm);"></div>
<input type="text" ng-model="user.name" name="name" required>
input valid=>{{userForm.name.$valid}} | form submit=>{{userForm.$submitted}}
</ng-form>
</div>
<button type="submit" ng-click="handleClick()">Submit</button>
Form valid=>{{mainForm.$valid}} | From submit => {{mainForm.$submitted}}
</form>
</div>
我正在尝试在 ng-repeat 中创建表单,除提交按钮外一切正常。提交按钮放置在主窗体中,它对所有子窗体都是通用的。
如果单击提交按钮,mainForm.$submitted
会更新,但 userForm.$submitted
不会更改。有什么解决办法吗?
angular.module("sampleApp", [])
.controller('sampleCtrl', function($scope) {
$scope.users = [{},{}];
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="sampleApp" ng-controller="sampleCtrl">
<form name="mainForm" novalidate>
<input type="text" name="school" ng-model="school" required>
main form input valid=>{{mainForm.school.$valid}}
<div ng-repeat="user in users">
<ng-form name="userForm">
<input type="text" ng-model="user.name" name="name" required>
sub form input valid=>{{userForm.name.$valid}} | sub form submit=>{{userForm.$submitted}}
</ng-form>
</div>
<button type="submit">Submit</button>
Form valid=>{{mainForm.$valid}} | Main From submit => {{mainForm.$submitted}}
</form>
</div>
简介
因此,我向按钮添加了一个 ng-click
处理程序,以便您也可以设置内部表单的提交状态。
我遇到的唯一困难是实际获取表单引用,但我添加了使用 ng-init
调用的函数 $scope.setUserForm
。解模式来自:
此外,请记住您需要一组用户表单来保存引用。单击您遍历这些元素并设置已提交。
代码
angular.module("sampleApp", [])
.controller('sampleCtrl', function($scope) {
$scope.UserForms = [];
$scope.setUserForm = function(form) {
$scope.UserForm = form;
$scope.UserForms.push(form);
}
$scope.forms = {};
$scope.users = [{}, {}];
$scope.handleClick = function() {
$scope.UserForms.forEach(function(element) {
element.$submitted = true;
});
};
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="sampleApp" ng-controller="sampleCtrl">
<form name="mainForm" novalidate>
<input type="text" name="school" ng-model="school" required>
input valid=>{{mainForm.school.$valid}}
<div ng-repeat="user in users">
<ng-form name="userForm">
<div ng-init="setUserForm(userForm);"></div>
<input type="text" ng-model="user.name" name="name" required>
input valid=>{{userForm.name.$valid}} | form submit=>{{userForm.$submitted}}
</ng-form>
</div>
<button type="submit" ng-click="handleClick()">Submit</button>
Form valid=>{{mainForm.$valid}} | From submit => {{mainForm.$submitted}}
</form>
</div>