On an Angular 8 project,
I have a create and edit component.
I just duplicated/refactored create to make the edit.
on arrival in edit-mode the component subscribes to a behavior subject which has been next'd the object to be edited (since it's a behavior subject, regardless of timeframe, my component correctly instanciates the object)
in the edit case instead of instantiating the form with empty values I instanciate it with the recuperated values straight up.
good.
now to the user it effectively looks like he is editing that object.
The issue is Form validation conditions were of course previously met for the object to be created in the first place so the Submit button is highlighted and ready to go.
I expected the touched property to already be a validation condition and for the submit button to be disabled until values are touched.
(different would be ideal but touched is a good starting point)
right now my edit form starts out as valid and I don't want that.
I don't want to "hack" this by setting one of the field's invalid flag because I don't pre-emptively know what the user will want to edit and I want it to be any field and for the user to only have to edit 1-n field for the form to be valid.
For Angular ^8:
Mark the form as pristine after setting the values to the controls:
this.form.markAsPristine();
And add the condition to submit button for making it disable if the form is untouched:
<button type="submit" [disabled]="form.pristine">Save</button>