title: Angular 4 ngValue everything but given values
body: <p>Angular 4 lets users display items by value easily, but how to display a value if value exists but is none of the selected?</p>
  
  <p>For example, if we have this select box:</p>
  
  <pre><code>&lt;select [(ngModel)]="yearChoice"&gt;
    &lt;option [ngValue]="'one_year'"&gt;1 year&lt;/option&gt;
    &lt;option [ngValue]="'two_years'"&gt;2 years&lt;/option&gt;
    &lt;option [ngValue]="'three_years'"&gt;3 years&lt;/option&gt;
    &lt;option [ngValue]="'four_years'"&gt;4 years&lt;/option&gt;
    &lt;option [ngValue]="'other'"&gt;other&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And also this input field:</p>
  
  <pre><code>&lt;input type="text" placeholder="6 months" *ngIf="!['one_year', 'two_years', 'three_years', 'four_years'].includes(yearChoice)" [(ngModel)]="yearChoice"&gt;
  </code></pre>
  
  <p>So if 'other' is selected, the input field is shown. Now, if user changes the input field, the select option would get corrupted, since the value is no longer 'other'.</p>
  
  <p>My question is: is there a way to make this input field changeable while still selecting 'other' option from select menu after navigating/saving etc?</p>