0

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>

Which one makes more sense to do and/or are there other options I am missing?

CodyBugstein
  • 21,984
  • 61
  • 207
  • 363
  • See update in this answer https://stackoverflow.com/questions/39242219/angular2-nested-template-driven-form/46748943#46748943 – yurzui Mar 04 '18 at 07:40
  • The only problem with that one is that the submit logic needs to be duplicated. For example, if some logic needs to be performed on the common parts of the form upon submit, there doesn't seem to be a way to process it in the common parts first before passing it up to the parent component – CodyBugstein Mar 04 '18 at 23:45
  • Can you create demo describing it? – yurzui Mar 05 '18 at 03:19
  • @yurzui this is a general, conceptual design question, I don't think it requires a full demo with working code (which would be time consuming to create) – CodyBugstein Mar 05 '18 at 04:45

0 Answers0