title: Reusable form control inputs in Angular5
body: <p>I've been looking through tutorials and I can't seem to find a good solution anywhere. </p>
  
  <p>In all of the tutorials with forms, they rewrite so much. A simple input with validation and an error message can be several lines long with several tags as well. </p>
  
  <p>Wouldn't it be smarter to create something like <code>app-input</code>, that you pass a name and label and it generates the rest?  </p>
  
  <p>Here's how I made my username field, </p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="username"&gt;Username&lt;/label&gt;
      &lt;label for="username"
             aria-haspopup="true"
             role="tooltip"
             class="tooltip tooltip-validation tooltip-sm"
             [class.invalid]="loginForm.get('username').invalid
          &amp;&amp; (loginForm.get('username').dirty || loginForm.get('username').touched)"&gt;
          &lt;input id="username" type="text"
                 formControlName="username"&gt;
          &lt;span class="tooltip-content"&gt;Username is required.&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Wouldn't something like </p>
  
  <pre><code>&lt;app-input name="username" label="username"&gt;&lt;/app-input&gt;
  </code></pre>
  
  <p>be a lot simpler? Or is there a downside to this that I'm not thinking of? </p>