Angular watch form input doesnt work - angularjs

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?

Answer 1

<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)
});
}

Answer 2

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