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

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

  •  0
  • 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 年前
        1
  •  1
  •   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>