AngularJS $watch not working inside ng-repeat

Question

I'm trying to achieve auto form validation without any submit. For this reason, I added the $watch in my form.

$scope.$watch('myForm.$valid', function(newVal, oldVal) {
    console.log('watching....');
    /*
      If valid 
      perform action
    */
  });

My form structure is:

<ul ng-controller="Ctrl">
    <li ng-repeat='user in userList track by $index'>
      <p>
        User {{$index+1}}: {{user.userType}} <br/>
        Designation: {{user.designation}}
      </p>
      <form name="myForm" class="my-form">
        <label>Age?:</label>
        <input name="userAge" type="number" ng-model="user.age" required/>
      </form>
    </li>
    <button style="margin-top:20px;" type="button" ng-click="addUser()">Add more user</button>
  </ul>

I can create multiple forms clicking the Add more user button. My form is under userList :

$scope.userList = [
    {
    userType: 'Doctor',
    designation: 'Sr. cardiologist'
    }
  ]

Plunker

Problem I'm unable to print the console.log() inside my watcher if the form is valid/invalid. It only prints during page load. But if I made any changes to the form it doesn't show any console print.

But if I keep my form outside the ng-repeat scope it works. it prints the console item based on the validity.

**So why it's not working inside ng-repeat?**How can I check my form that I created is valid. What can I do to make it work? any suggestions or example will be appreciated

You're having multiple forms with the same name. You should wrap the form outside `ngRepeat` (`
...
`) - I don't think you need to have a specific form for each child in the loop — Alon Eitan, Oct 04 '17 at 15:20
Also, your HTML is invalid, you should put the button outside the `ul` or wrap it with `li` — Alon Eitan, Oct 04 '17 at 15:23
also using a $watch on form validity is not good for performance, you can do a [ng-change](https://docs.angularjs.org/api/ng/directive/ngChange). — alphapilgrim, Oct 04 '17 at 15:29
@AlonEitan but the button is outside ng-repeat and watch doesn’t work in initially loaded form. I need to have multiple form for the scenario — Raihan, Oct 04 '17 at 15:32
@Raihan Is this what you're trying to do? http://plnkr.co/edit/icMFOxp0kP0QFFnj9RWM?p=preview — Alon Eitan, Oct 04 '17 at 15:33
The [ng-repeat](https://docs.angularjs.org/api/ng/directive/ngRepeat) directive creates child scopes which will cause problems. For more information, see [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). — georgeawg, Oct 04 '17 at 16:07
@AlonEitan Actually form should be part of ng-repeat. I might have multiple forms. Also, my form name I guess needs to be dynamic in order to achieve the result. — Raihan, Oct 04 '17 at 16:12
Why are you using multiple forms? Each `` element has its own [ngModelController](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) which has an individual `$valid` property. There is no need to instantiate a [ngFormController](https://docs.angularjs.org/api/ng/type/form.FormController) for each `` element. — georgeawg, Oct 04 '17 at 16:13
@georgeawg I think you are right! Thanks :) also the example `AlonEitan` given only works for the first input. For other inputs, it doesn't check the changes — Raihan, Oct 04 '17 at 16:21
Take a step back and describe what you are trying to achieve. There is likely a better approach. Forms should only be used to consolidate a group of input elements to be submitted together to a server. The are better ways to work with individual inputs such as [custom validators](https://docs.angularjs.org/guide/forms#custom-validation). — georgeawg, Oct 04 '17 at 16:27
@georgeawg Ok. So I can add a list of users. Each user may have multiple input fields like I gave age as an example. From the controller, I have to check if all fields are filled up. and if all fields are not empty then I have to send those values to the server. I couldn't find any better way to check if the forms are not empty without using angular $watch, I can't have any submit button and that's a requirement :( Hope this helps — Raihan, Oct 04 '17 at 16:36
Please review [AngularJS Developer Guide - Forms](https://docs.angularjs.org/guide/forms). Then ask a **new** question if you have any problems. — georgeawg, Oct 04 '17 at 16:43
@Raihan It's strange that my example only works for the first input, because I added 3 inputs, added value in the first 2 inputs, and after filling the third input I got `watching...` in the console. But I see that you got an answer so good luck :) — Alon Eitan, Oct 04 '17 at 16:49

AngularJS $watch not working inside ng-repeat

0 Answers0