title: angular reactive forms - using same formcontrol in multiple forms
body: <p>I have a component with ngSwitch which houses 3 forms (loginForm, signupForm and forgotForm), in which I use the same email control.</p>
  
  <pre><code>email: FormControl = new FormControl(null, [
      Validators.required,
      Validators.email
  ]);
  password: FormControl = new FormControl(null, [Validators.required]);
  
  constructor(){  
      this.loginForm = new FormGroup({
          email: this.email,
          password: this.password
      });
      this.signupForm = new FormGroup({
          email: this.signUpEmail,
          password: this.signUpPassword,
          privacy: this.privacy,
          newsletter: this.newsletter
      });
      this.forgotForm = new FormGroup({
          email: this.email
      });
  }
  </code></pre>
  
  <p>The controls are bound with via formControlName in the view</p>
  
  <pre><code>&lt;div [ngSwitch]="activeSegement"&gt;
          &lt;div *ngSwitchCase="'LOGIN.PAGE_TITLE'" class="segment-tab"&gt;
              &lt;form [formGroup]="loginForm" class="login-form"&gt;
                  &lt;ion-item class="login-input-item"&gt;
                          &lt;ion-label&gt;{{ 'LOGIN.EMAIL' | translate }}&lt;/ion-label&gt;
                          &lt;ion-input type="text" formControlName="email"&gt;&lt;/ion-input&gt;
                      &lt;/ion-item&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div *ngSwitchCase="'SIGNUP.PAGE_TITLE'" class="segment-tab"&gt;
              &lt;form [formGroup]="signupForm" class="login-form"&gt;
                  ...
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div *ngSwitchCase="'FORGOT_PASSWORD.PAGE_TITLE'" class="segment-tab"&gt;
              &lt;form [formGroup]="forgotForm" class="login-form"&gt;
                  ...
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Issue</strong></p>
  
  <p>On first loading, inputting text into email and password controller in the loginForm reflect the change inside the controller but not the form. When I log out loginForm, the values are null. When I switch the tab and back, the values are registered (I believe in this case the form is instantiated with the values)</p>
  
  <p>Is there some rule about using the same formcontrol in multiple forms I don't know about?</p>