CODEWITHSUNDEEP
javascriptangularjs
Dwight
Dwight

Reputation: 12460

Watch model in Angular without replacing it's initial value

I'm trying to place a watch on an input to perform some functions every time it changes. However, this input has a value when the page is loaded (in this instance, it is loaded with the user's email address):

<input type="email" name="email" value="[email protected]" ng-model="email">

Then, in my form controller:

$scope.$watch('email', function(newValue, oldValue) {
    console.log('Email address has been changed.');
    console.log('Old value: ', oldValue);
    console.log('New value: ', newValue);
}, true);

On page load, the above three lines are console logged out, with both oldValue and newValue being undefined. Then, the form field is left empty.

How can I make Angular keep the existing value of the input and not replace it with nothing when attaching a watch on it?

Upvotes: 0

Views: 632

Answers (1)

m59
m59

Reputation: 43765

The issue isn't with your watch. The problem is that this is the not the expected use of angular. This is the correct procedure.

app.controller('myCtrl', function($scope) {
  $scope.email = '[email protected]';
});

It is the databinding itself that is removing your value and it is replacing it with the value of $scope.email, as it should.

If you MUST get the value from the input field itself, then you would need to cache that value before the controller loads. It is the controller itself that causes the problem.

Here's an example - click (comment out the cachedValue and $scope.email to see that the controller/ng-model will blank your value).

The cleanest solution would be to not use ng-model and instead make your own directive that sets the initial value to $scope, then applies the ng-model thus updating as you expect.

I was bored so I wrote the directive.

app.directive('initModel', function($compile) {
  return {
    link: function(scope, element, attrs) {
      scope[attrs.initModel] = element[0].value;
      element.attr('ng-model', attrs.initModel);
      element.removeAttr('init-model');
      $compile(element)(scope);
    }
  };
});

<input type="email" name="email" value="[email protected]" init-model="email">

Demo here (click).

Upvotes: 2

Related Questions