Seeking advice on how to efficiently reuse my Form Component.
Data Model:
class Contact {
id?: String;
name: String;
}
When a new
Contactis created, theidis optional in the model as it doesn't exist at that point.When editing a
Contact, theidexists but is not editable and therefore not part of the form.
Behavior:
The Edit and Create views should utilize the same Form @Component since they share the same fields and validation rules.
However, each view must have different actions. For example, the Edit view requires Delete and Reload buttons, and the Save buttons for both views need to perform different actions (Create uses a POST request, Edit uses a PATCH request).
Attempts / Challenges:
I have created a ContactCreateComponent and a ContactEditComponent, both containing
<contactForm [contact]="contact"></contactForm>The ContactFormComponent includes <form [formGroup]="form"> and
<input formControlName="name">I am struggling with extracting the form data from the ContactFormComponent when the Save Button is clicked.
Thoughts / Ideas:
One approach could be defining the FormGroup inside the Create and Edit Components and passing the instance to the Form Component using @Input. This would allow for reading/updating/resetting the Form Data. However, duplicating the FormGroup definition and validators seems redundant, as it should ideally be centralized within the Form Component.
(Avoiding two-way binding on the @Input property due to immutability of Contact)
Any suggestions on how to tackle this issue?