How to detect change in input using Angular8

Question

i have edit and close button in same row, if there is any edit made to the input field then it must show an alert message, if no change is made it must retain its old value. My issue here is, i click on edit and do some change to input, when i click on close, i am able to retain new value, but when i click on close, it must revert to old value

TS:

 public onEditEvent(event) {
    this.editCommitment = event;
  }

  public onCloseEvent(event){
    if(event.policyCT == this.editCommitment.policyCT && event.quotes == this.editCommitment.quotes && event.writtenPremium == this.editCommitment.writtenPremium) {
      event.writtenPremium = this.editCommitment.writtenPremium;
      event.policyCT = this.editCommitment.policyCT;
      event.quotes = this.editCommitment.quotes 
      this.editableRow = 0;
    } else {
      alert('change')
    }
  }

Demo

Thanks for response @TimothyAlexisVass, here my issue is that, i click on edit and do some change to input, when i click on close, i am able to retain new value, but when i click on close, it must revert to old value — Bhrungarajni
– Bhrungarajni, Commented Jul 29, 2021 at 16:46
Please update your question instead ;) I need to go, perhaps someone else can help you. — Timothy Alexis Vass
– Timothy Alexis Vass, Commented Jul 29, 2021 at 16:50
Generically, one approach is to make a deep copy of the item before entering into 'edit mode'. The edit mode uses the copy. When you save the edits, copy that deep copy back to the source. When you cancel, do nothing. — JeffryHouser
– JeffryHouser, Commented Jul 29, 2021 at 17:22

Vimal Patel · Accepted Answer · 2021-07-29 17:22:43Z

1

By default ng-model will update the model. You need to maintain old value manually when user clicks on edit button. Like below:-

 selectedRow: any;
  public onEditEvent(event) {
    this.selectedRow = { ...event };
    this.editCommitment = event;
  }

Apply that when user click on close button.

  public onCloseEvent(event) {
    event.writtenPremium = this.selectedRow.writtenPremium;
    event.policyCT = this.selectedRow.policyCT;
    event.quotes = this.selectedRow.quotes;
    this.editableRow = 0;
  }

And on Save click you dont have to do anything as model is already updated.

Working Demo:- https://stackblitz.com/edit/angular-turxyo?file=src%2Fapp%2Fapp.component.ts

answered Jul 29, 2021 at 17:22

Vimal Patel

3,1152 gold badges27 silver badges39 bronze badges

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

5 Comments

Bhrungarajni Over a year ago

Thanks for response, will test and update you

Bhrungarajni Over a year ago

Thanks it is working fine, i have voted and accepted answer

Bhrungarajni Over a year ago

i need one help in this

Vimal Patel Over a year ago

@Bhrungarajni add a new question with problem statement, will try to help.

Bhrungarajni Over a year ago

stackoverflow.com/questions/69983942/… Please help me in this, i have created one new question.

Collectives™ on Stack Overflow

How to detect change in input using Angular8

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related