title: Why template reference variable using ngModel is undefined inside a for-loop?
body: <p>I'am trying to get a DOM element in HTML template to disable/enable a 
  form-button based on input value and using <code>ngModel</code>:<strong><code>#Custom_FirstName="ngModel"</code></strong>. The input is a custom field in separated component.</p>
  
  <p>My issue is that the element <code>Custom_FirstName</code> is always <code>undefined</code> and I found out that it has to do with the For Loop <code>ngFor</code>. When I remove <code>ngFor</code>, The error is fixed. But this would not solve my issue because I need the for-loop as the user can add more than one input-text and user with <code>firstName</code> dynamically.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;div *ngFor="let el of users.departments.admins; let i=index; trackBy: trackByFn"
      &lt;input-text [name]="'firstanme'"                                                             
                  [(ngModel)]="el.firstName"                                                          
                  [ngModelOptions]="{standalone: true}"                                                      
                  [readonly]="false"                                                           
                  [required]="true"
                  labelText="First Name"
                  #Custom_FirstName="ngModel"&gt;
      &lt;/input-text&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Button:</strong></p>
  
  <p><code>&lt;button [disabled]="!Custom_FirstName.value || ....&gt;</code></p>
  
  <p>I have been checking the <a href="https://angular.io/guide/template-syntax" rel="nofollow noreferrer">official Doc</a>, but I was not able to find the fix for that. Any hint how work around this issue?</p>