title: ngIf with validation controls
body: <p>I'm writing a custom form component which is basically a textbox that will change to a label or a textarea depending on a specific property. </p>
  
  <p>So if the custom component is set as read-only, the textbox should be hidden and a label must be displayed. </p>
  
  <p>This hide and show logic work flawlessly. However, the dom element responsible for displaying validation messages throws an error when the control is not found. </p>
  
  <pre><code>&lt;span class="form-control-readonly" *ngIf="readonly == true" #valuelabel&gt;
   {{inputModel}}
  &lt;/span&gt;
  
  &lt;input 
      *ngIf="readonly != true" 
      #control="ngModel" 
      [id]="id" 
      type="text" 
      class="form-control" 
      [placeholder]="caption" 
      [(ngModel)]="inputModel" 
      (ngModelChange)="onTextChange()" 
      [maxlength]="maxLength"
      [required]="isRequired === true ? '' : null"  
      [ngClass]="{'invalid': !control.valid, 'valid': control.valid }"&gt; 
  
   &lt;div *ngIf="(readonly == false) &amp;&amp; (control.invalid &amp;&amp; hideFeedback === false)" class="invalid-feedback"&gt;
       &lt;div *ngIf="(readonly == false) &amp;&amp; (control.errors.required)"&gt;{{ caption }} is required&lt;/div&gt;
       &lt;div *ngIf="(readonly == false) &amp;&amp; (control.errors.maxlength)"&gt;{{ caption }} should be {{ control.errors.maxlength.requiredLength }} characters long &lt;/div&gt;        
   &lt;/div&gt;
  </code></pre>
  
  <p>control.errors in the last div throws "Cannot read property 'invalid' of undefined" error. Probably, because the control doesn't exist in dom. </p>
  
  <p>When ngIf on input is changed to hidden, it begins to work, but I want to achieve it with ngIf.</p>