Bdtjtk

I developped a reactive form in angular :

Select dropdown List ===> [id] = 1, 2, 3....etc

input text ===> name : .....

input text ===> adress : .....

input text ===> Description : .....

I fill the the form by calling a http get service based on selected id in both ngOnInit and (change) handler on select dropdown List

I have two buttons : "validate" and "cancel" Modifications

User can modify inputs data values and save modifications on validate button click.

What is the the best way to cancel modifications done by the user?

When using Reactive forms, your object values are not bound to the form so any changes the user makes do not modify the original object.

You can copy the values from your existing object back over the form values using code like this:

// Update the data on the form

this.productForm.patchValue({

  productName: this.product.productName,

  productCode: this.product.productCode,

  starRating: this.product.starRating,

  description: this.product.description

});

Update

I assume your current process is this:

1) In the ngOnInit, retrieve your data and store it in a property, such as product shown in the code above.

2) Then you populate the form using code similar to the above.

When the user makes changes, the changes are not made to the original property (product in this example). Rather they are made to the form model defined with the FormGroup.

So all you need to do is repeat the code from step 2 to cancel any changes and return the form to its state as before the user made any updates.

Does that make sense?

There is a reset method on form controls in angular:

reset(value?: any, options?: {

    onlySelf?: boolean;

    emitEvent?: boolean;

}): void;

Example

class Component {

  form: FormGroup;



  resetForm() {

    this.form.reset();

  }

}