Angulaire ngModelOptions - lier la valeur au modèle uniquement lorsque l'utilisateur clique sur le bouton

Question

J'ai un champ de saisie lié à un objet de modèle, que je ne veux pas lier jusqu'à ce que l'utilisateur clique sur un bouton. Je suis passé par ng-model-option et updateOn, mais il semble qu'ils déclenchent uniquement sur les événements JS hors de la boîte comme blur et focus. Comment puis-je faire la liaison de valeur au modèle seulement sur le clic du bouton ou d'une fonction personnalisée?

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

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

Aurais-je besoin d'écrire une directive personnalisée?

Answer 1

Vous pouvez résoudre votre problème en enveloppant les champs dans un formulaire, puis mettre à jour ng-model sur submit d'un formulaire comme 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