代码之家 › 专栏 › 技术社区 › Ebin Manuval

ng内的ng表单重复不更新子表单$提交

angular-forms angularjs javascript

Ebin Manuval · 技术社区 · 8 年前

我正在尝试在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>

1 回复 | 直到 8 年前

Menelaos 8 年前

简介

因此,我添加了一个 ng-click 处理程序,以便设置内部表单的提交状态。

我唯一的困难是实际获取表单引用,但我添加了函数 $scope.setUserForm 用一个 ng-init https://stackoverflow.com/a/23862411/1688441

此外,请记住,您需要一个userForms数组来保存引用。单击后,您迭代这些元素并设置提交的。

密码

 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前