Angular2 - Update model on button click

Question

When using the angular2 ngModel for two-way data binding:

<input [(ngModel)]="heroName">

Is there a way to only update the model once a button is clicked? Or be able to cancel the changes that the user made to the input control? I am aware of the other approach where we can split the [(ngModel)] in its [] and () and only update the input on blur or when the Enter key is pressed etc - but this is not what I want.

I need this behavious because, the user must be able to cancel the changes. Thanks

micronyks · Accepted Answer · 2016-10-24 17:45:30Z

8

You can do following for that,

DEMO : http://plnkr.co/edit/OW61kGGcxV5MuRlY8VO4?p=preview

{{heroName}}<br>
<input [ngModel]="heroName" #change> <br>
<br>
<button (click)="update(change.value)">Update Model</button>

export class App {
  heroName="Angular2";
  update(value){
    console.log('value before button click' + this.heroName);
    this.heroName=value;
    console.log('value after button click' + this.heroName);
  }
}

answered Oct 24, 2016 at 17:45

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

micronyks Over a year ago

[()] syntax internally updates model without your permission. so you should opt for other way.

user2711444 Over a year ago

This is interesting and what I want. But is there another framework-built-in way of doing it or this is the only way by using the template variable?

micronyks Over a year ago

other framework-built-in way means what? its Angular2 way syntax only. I'm not sure but its easiest way I guess to update model only with click event.

micronyks Over a year ago

You said you already looked into []() syntax so I think next solution is this.

Guilherme Meireles · Accepted Answer · 2016-10-24 17:48:33Z

1

You can separate your "live" data from your "valid" data.

Try something like this:

<input [(ngModel)]="live.heroName">
<button (click)="save()">Save</button>
<button (click)="reset()">Reset</button>

And the controller:

live = { heroName: '', heroPower: '' };
valid = { heroName: '', heroPower: '' };

save() {
    this.valid = Object.assign({}, this.live);
}

reset() {
    this.live = Object.assign({}, this.valid);
}

answered Oct 24, 2016 at 17:48

Guilherme Meireles

7,9492 gold badges23 silver badges16 bronze badges

1 Comment

user2711444 Over a year ago

This is what I have been thinking about, but it becomes quite verbose if you have to do this for every input. Thanks :)

chanoto89 · Accepted Answer · 2016-10-24 17:59:55Z

1

You can create a new property for the form binded property.

Would look like this

<input [(ngModel)]="formHeroName" #change> <br>
{{selectedHeroName}}
<br>

Update Model Cancel

export class App implements OnInit {
selectedHeroName="Angular2";
formHeroName = "";

ngOnInit() {
  this.formHeroName = this.selectedHeroName;
}

update(){
  this.selectedHeroName= this.formHeroName;
}

cancel() {
  this.formHeroName = this.selectedHeroName;
}
}

See plunker for example - http://plnkr.co/edit/0QEubJDzlgs0CdnKrS8h?p=preview

edited Oct 24, 2016 at 17:59

answered Oct 24, 2016 at 17:48

chanoto89

2411 silver badge5 bronze badges

2 Comments

user2711444 Over a year ago

Thank you for your answer. I was looking for a way where I don't have to introduce new state variables.

chanoto89 Over a year ago

without keeping track of the differences between original/updated variables, how are you achieving the cancelling of the changes?

Collectives™ on Stack Overflow

Angular2 - Update model on button click

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related