How to prevent ng-model bound attribute from populating input field

Question

My project has a form with an input field and a button.

<input id="inputID" form="IDForm" type="text" autocomplete="off" data-ng-model="User.getInfo().ID" placeholder="Enter ID">

<button form="IDForm" type="submit" class="forward-button" ng-if="User.getID()"  data-ng-click="sendID()">
  Verify ID
</button>

Currently the ng-if makes the button not appear until the user enters an ID. When they enter an ID and click Verify ID, they are taken to the next page. However, if they press back from that page then the input field is automatically filled with the ID they previously entered because of the two way ng-model binding. Is there a way to prevent the input field from automatically filling in that bound attribute when the page loads?

Putting a function inside things like `ngIf`, `ngModel` etc, is a bad practice, angular will run those functions over and over on every digest cycle. You should bind the view to a properties of the controller, not functions — Alon Eitan, Jun 01 '16 at 12:10
Solution with jQuery: [link](http://stackoverflow.com/a/8861236/1107181) — sachin chavda, Jun 01 '16 at 12:15

score 2 · Answer 1 · answered Jun 01 '16 at 12:10

2

When the button is enabled, set the current form to pristine state, $scope.form.$setPristine(); which will ensure even when you press back, the form values will not populated and would be in the initial state.

answered Jun 01 '16 at 12:10

Thalaivar

23,282
5
60
71

How to prevent ng-model bound attribute from populating input field

1 Answers1