【问题标题】:ng-form inside ng-repeat not updating subform.$submittedng-repeat 中的 ng-form 不更新 subform.$submitted
【发布时间】:2018-03-24 02:28:30
【问题描述】:

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

【问题讨论】:

  • 看看答案。

标签: javascript angularjs angular-forms


【解决方案1】:

简介

所以,我向按钮添加了一个ng-click 处理程序,以便您也设置内部表单的提交状态。

我遇到的唯一困难是实际获取表单引用,但我添加了函数$scope.setUserForm,它使用ng-init 调用。解决模式来自:https://stackoverflow.com/a/23862411/1688441

另外,请记住,您需要一组用户表单来保存引用。单击时,您将遍历这些元素并设置已提交。

代码

 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>

【讨论】:

    猜你喜欢
    • 2015-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-09
    • 2019-02-03
    • 2015-08-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多