ng-form inside ng-repeat not updating subform.$submitted

Question

I am trying create forms inside ng-repeat, everything is working fine except submit button. Submit button placed in main form it is common for all sub forms.
If the submit button is clicked mainForm.$submitted gets updated but userForm.$submitted dose not changing. Is there any work around for that ?

 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>

Menelaos · Accepted Answer · 2017-10-12T08:39:34.463

Intro

So, I added a ng-click handler to the button so that you set the submitted status of the internal form as well.

The only difficult I had was to actually get the form reference, but I added the function $scope.setUserForm which is called with an ng-init. The solution pattern is from: https://stackoverflow.com/a/23862411/1688441

Also, please keep in mind you need an array of userForms to keep the references. On click you iterate through these elements and set the submitted.

Code

 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-form inside ng-repeat not updating subform.$submitted

1 Answers1

Intro

Code