2

I have an input field that is bound to a model object, which I don't want to bind until the user clicks a button. I went through ng-model-option and updateOn, but seems they trigger only on out of the box JS events like blur and focus. 

<input ng-model="modelobject" ng-model-options="{updateOn: confirmButtonClick}">

<button id="confirmButton" role="confirm" ng-click="confirmButtonClick == true" class="confirm-btn">Confirm</button>

How can I make the value bind to the model only upon the click of the button or a custom function? Would I need to write a custom directive?

nikjohn
  • 20,026
  • 14
  • 50
  • 86

1 Answers1

4

You could do solve your problem by wrapping you fields inside a form and then update ng-model on submit of a form like ng-model-options="{updateOn: 'submit'}".

HTML

<form name="myForm">
  <input ng-model="modelobject" ng-model-options="{updateOn: 'submit'}">
  <button id="confirmButton" role="confirm" class="confirm-btn">
    Confirm
  </button>
</form>

Working Plunkr

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299