Angular watch form input doesnt work

Question

I have a form in html page :

<div ng-controller="ctrl as c">
      <form name="myForm">
        <input type="text" name="myInput" require/>
     </form>
</div>

I want to watch changes of input in my controller, so I did like this :

angular.module('app').controller('ctrl', ctrl);
ctrl.$inject = ['$scope'];

function ctrl($scope) {
    var vm = this;
    $scope.$watch('myForm.myInput', function (value) {
       //check validity
    });
}

But when I change input value, nothing happen in controller. Any idea?

asisgn a model to input but anyway you don't want to check the input value validations by watching a model, there are more clear way to detect the input is clear or not. — Kalhan.Toress, Aug 19 '15 at 05:54
You code requires two changes only one is to add ng-model="c.myInput" and second one is to keep watching this property as i mentioned in my answer. — Mohan Singh, Aug 19 '15 at 06:09
but if I want to check input validity , like this : $scope.$watch('myForm.myInput,$valid', function (value) { //check validity });, watch the model is not enogh for me — BrMe, Aug 19 '15 at 06:25

score 0 · Answer 1 · edited May 23 '17 at 12:08

The $scope.watch() function creates a watch of some variable.

So you need to bind a scope to your input and creates watch for that variable.

View:

<input type="text" ng-model="myInput" name="myInput" require/>

Controller:

function ctrl($scope) {
    var vm = this;
    $scope.myInput = "";
    scope.$watch('myInput', function(newValue, oldValue) {
       // Your logic
    });

}

I believe watching the entire form may create a performance hit, still they are ways to watch multiple variable using watch

1. Create a $scope object like

     $scope.form = {
             name:"My Name",
             Id:"My Id:,
             ....
       }

Now you can use $watch with a third variable 'true'

    $scope.$watch('form', function(newVal, oldVal){
       console.log('changed');
     }, true);

Html:

         <input type="text" ng-model="form.name" name="myName" require/>
         <input type="text" ng-model="form.id" name="myId" require/>

2. Use $scope.$watchCollection

       $scope.$watchCollection('[item1, item2]', function(newValues, oldValues){
         // You logic here
        // newValues and oldValues contain the new and old value  of the array      
        });

Also check this post for different ways of listening changes to multiple elements using $watch

if I want to wacth all form? or check form validation? like :$scope.$watch('myForm.$valid', function (validity) { }); Can i do it? — BrMe, Aug 19 '15 at 06:36
I dont want to create form in controller' just to watch the form which exist on html, finally I check form validaion on ng-change of input. 10x anyway — BrMe, Aug 19 '15 at 09:27
10x again..I think I can watch form like in this question : http://stackoverflow.com/questions/25027876/watch-form-validity-from-parent-controller but it doesnt work for me — BrMe, Aug 19 '15 at 10:07

Mohan Singh · Answer 2 · 2015-08-19T06:06:37.493

0

<div ng-controller="ctrl as c">
  <form name="myForm">
    <input type="text" name="myInput" ng-model="c.myInput" require/>
 </form>
</div>

Controller

function ctrl($scope) {
  var vm = this;
  vm.myInput = 'hello';
  $scope.$watch(function(){
       return vm.myInput;
     }, function(newValue, oldValue) {
        console.log(newValue)
  });

}

edited Aug 19 '15 at 06:06

answered Aug 19 '15 at 05:55

Mohan Singh

883
8
18

Angular watch form input doesnt work

2 Answers2