I have two forms in my Angular app: Form A
(form for site admin) and Form U
(form for standard user).
Form A
includes all of Form U
but adds a few more input fields.
I want to write Form U
only once and use it both in Form U
and Form A
rather than having two copies of identical code.
My two options at the moment seem to be:
1:
Declare the <form>
in the containing components, and pass in the sub form as a component tag, i.e.
<form [formGroup]="formA">
<form-u-component></form-u-component>
<input name="admin-input1" />
<input name="admin-input2" />
</form>
2.
Include logic inside the FormUComponent
that handles cases of admin form or user form. Pass in an "isAdmin" switch i.e.
<form-u-component [isAdmin]="isAdmin"></form-u-component>