title: Unable to assign form control to template variable in Reactive Forms - angular?
body: <p>I am new to angular let say, i have reactive form like follow </p>
  
  <pre><code>ngOnInit() {
  this.registerFormGroup = this.formBuilder.group({
      email: [ '', Validators.compose([Validators.required, Validators.email])],
      password: this.formBuilder.group({
      first: [ '', Validators.required ],
      second: [ '', Validators.required,  ] 
      })
    });
  }
  </code></pre>
  
  <p>and my angular template looks like follow </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;form [formGroup]="registerFormGroup" 
      (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate&gt;
  &lt;div class="form-group" &gt;
      &lt;label for="email"&gt;Email&lt;/label&gt;
      &lt;input type="email" formControlName="email" placeholder="Enter Email" 
     class="form-control"&gt;
  &lt;/div&gt;
  &lt;div *ngIf="!registerFormGroup.get('password').get('first').valid" 
       class="alert alert-danger"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="form-group text-center"&gt;
    &lt;button type="submit" class="btn btn-success btn-lg" 
    [disabled]="!registerFormGroup.valid"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
   </p>
  
  <p>For example, email field has two validations such as <code>required</code> and <code>email</code> type validate so depends upon the error I have to display error message so in my template  am using like </p>
  
  <pre><code>&lt;div *ngIf="!registerFormGroup.get('email').valid &amp;&amp; (registerFormGroup.get('email').touched)" 
    class="alert alert-danger"&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Instead of adding same <code>registerFormGroup.get('email')</code>  again and again i trying to create template expression like <code>#emailForm="registerFormGroup.get('email')"</code> in</p>
  
  <pre><code>&lt;input type="email" formControlName="email" placeholder="Enter Email" class="form-control" #emailForm="registerFormGroup.get('email')"&gt;
  </code></pre>
  
  <p>so that i can use use like </p>
  
  <pre><code>&lt;div *ngIf="!emailForm.valid" class="alert alert-danger"&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>but i am getting error like </p>
  
  <blockquote>
    <p>compiler.es5.js:1690 Uncaught Error: Template parse errors:
    There is no directive with "exportAs" set to "registerFormGroup.get('email')" ("l>
          ]#emailForm="registerFormGroup.get('email')">
        </p>
  </blockquote>
  
  <p>what mistake i made??</p>