When I submit data in my reactive form, the stored object is returned from the server. This can happen due to server logic altering a field that needs to be updated on the client side as well.
onSave() {
const data = this.form.value;
console.log("saving", data);
this.service.save(data)
.subscribe(
suc => {
this.data = suc;
console.log("saving succeeded", suc);
},
err => console.log("saving failed", err)
);
}
I've noticed that changes in the data model don't affect the controls on my page. As a workaround, I reset the form value explicitly using this.form.setValue(this.data) as outlined below.
onSave() {
const data = this.form.value; ...
this.service.save(data)
.subscribe(
suc => {
this.data = suc;
this.form.setValue(this.data);
}, ...
);
}
While this approach achieves the desired outcome, it feels somewhat unconventional. I have a nagging feeling that I'm masking a design flaw rather than addressing it directly. Perhaps there should be an automatic linkage between component and form data. Currently, I manually copy data from the form to the component before saving, and vice versa after saving. Given that this process is repeated for every operation, I believe there should be a more streamlined solution available.
Am I handling this situation correctly, or is there a step I overlooked?