Angular 2 - Single Form Component for Create and Edit
<p>I'm looking for some good advice / best practice to reuse my Form Component.</p>

<h2>Data Model:</h2>

<pre><code>class Contact {
  id?: String;
  name: String;
}
</code></pre>

<ul>
<li><p>When <strong>creating</strong> a new <code>Contact</code> there's of course <strong>no <code>id</code></strong>, that's why it's optional in the model.</p></li>
<li><p>When <strong>editing</strong> a <code>Contact</code> there is an <code>id</code>, but it's not editable and thus it's not part of the form.</p></li>
</ul>

<h2>Behavior:</h2>

<p>The Edit and the Create view should use the same Form <code>@Component</code>, because the available fields are the same, and validation constraints are the same, too.</p>

<p><strong>But</strong> both views must have different actions. E.g. the Edit view must have a Delete and Reload button, and of course the Save buttons of both views must behave differently (Create makes a <code>POST</code> request, Edit makes a <code>PATCH</code> request).</p>

<h2>What I tried / Problems:</h2>

<p>I created a <code>ContactCreateComponent</code> and a <code>ContactEditComponent</code>, which both have the <code>&lt;contactForm [contact]="contact"&gt;&lt;/contactForm&gt;</code> within their template. And because both views must have different buttons and actions, I did place the Buttons with in the Create and Edit Components.</p>

<p>The <code>ContactFormComponent</code> has the <code>&lt;form [formGroup]="form"&gt;</code> and <code>&lt;input formControlName="name"&gt;</code> tags.</p>

<p>Now I can't figure out how to pull the form data out of the <code>ContactFormComponent</code> when the Save Button is clicked.</p>

<h2>Thoughts / Ideas:</h2>

<p>I could define the <code>FormGroup</code> within the Create and Edit Components and then pass the <code>FormGroup</code> instance to the Form Component via <code>@Input</code>. This way I could read / update / reset the Form Data. But then I had to write the whole <code>FormGroup</code> definition and validators twice, though in my opinion this should stay within the Form Component.</p>

<p>(I don't want to use two-way binding on the <code>@Input</code> property, because <code>Contact</code> is immutable)</p>

<p>Do you have any idea how to solve this?</p>