title: Angular 2 - Single Form Component for Create and Edit
body: <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>