Angular2 - Create a reusable, validated text input component
<p>I'm creating an Angular2 application with a Node backend. I will have forms that submit data to said backend. I want validation on both the client and server side, and I'd like to avoid duplicating these validation rules.</p>

<p>The above is somewhat irrelevant to the actual question, except to say that this is the reason why I'm not using the conventional Angular2 validation methods.</p>

<p>This leaves me with the following HTML structure:</p>

<pre><code>&lt;div class="form-group" [class.has-error]="hasError(name)"&gt;
    &lt;label class="control-label" for="name"&gt; Property Name
    &lt;input id="name" class="form-control" type="text" name="name" [(ngModel)]="property.name" #name="ngModel" /&gt;
    &lt;div class="alert alert-danger" *ngIf="hasError(name)"&gt;{{errors.name}}&lt;/div&gt;
&lt;/div&gt;

&lt;div class="form-group" [class.has-error]="hasError(address1)"&gt;
    &lt;label class="control-label" for="address1"&gt; Address
    &lt;input id="address1" class="form-control" type="text" name="address1" [(ngModel)]="property.address.address1" #address1="ngModel" /&gt;
    &lt;div class="alert alert-danger" *ngIf="hasError(address1)"&gt;{{errors['address.address1']}}&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I will have some large forms and would like to reduce the verbosity of the above. I am hoping to achieve something similar to the following:</p>

<pre><code>&lt;my-text-input label="Property Name" [(ngModel)]="property.name" name="name"&gt;&lt;/my-text-input&gt;
&lt;my-text-input label="Address" [(ngModel)]="property.address.address1" name="address1" key="address.address1"&gt;&lt;/my-text-input&gt;
</code></pre>

<p>I'm stumbling trying to achieve this. Particular parts that give me trouble are:</p>

<ul>
<li>Setting up two-way binding on the <code>ngModel</code> (changes that I make in the component do not reflect back to the parent).</li>
<li>Generating the template reference variable (<code>#name</code> and <code>#address1</code> attributes) based on an <code>@Input</code> variable to the component.

<ul>
<li>It just occurred to me that perhaps I don't need a separate template reference variable name for each instance of the component. Perhaps I can just use <code>#input</code> since it's only referenced from within that component. Thoughts?</li>
</ul></li>
<li>I could pass <code>errors</code> or a <code>constraints</code> object to each instance of the component for validation, but I'd like to reduce repetition. </li>
</ul>

<p>I realize that this is a somewhat broad question, but I believe that a good answer will be widely useful and very valuable to many users, since this is a common scenario. I also realize that I have not actually <em>shown</em> what I've tried (only explained that I have, indeed, put forth effort to solve this on my own), but I'm purposely leaving out code samples of what I've tried because I believe there must be a clean solution to accomplish this, and I don't want the answer to be a small tweak to my ugly, unorthodox code.</p>