角度反应形式 - 以多种形式使用相同的形式控制

Question

我有一个包含ngSwitch的组件，其中包含3个表单（loginForm，signupForm和forgotForm），其中我使用相同的电子邮件控件。

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
    });
}

控件在视图

中与via formControlName绑定

<div [ngSwitch]="activeSegement">
        <div *ngSwitchCase="'LOGIN.PAGE_TITLE'" class="segment-tab">
            <form [formGroup]="loginForm" class="login-form">
                <ion-item class="login-input-item">
                        <ion-label>{{ 'LOGIN.EMAIL' | translate }}</ion-label>
                        <ion-input type="text" formControlName="email"></ion-input>
                    </ion-item>
            </form>
        </div>

        <div *ngSwitchCase="'SIGNUP.PAGE_TITLE'" class="segment-tab">
            <form [formGroup]="signupForm" class="login-form">
                ...
            </form>
        </div>

        <div *ngSwitchCase="'FORGOT_PASSWORD.PAGE_TITLE'" class="segment-tab">
            <form [formGroup]="forgotForm" class="login-form">
                ...
            </form>
        </div>
    </div>

问题

首次加载时，在loginForm中输入文本到电子邮件和密码控制器会反映控制器内的更改，但不反映表单。当我注销loginForm时，值为null。当我切换选项卡并返回时，会注册值（我相信在这种情况下，表单会使用值进行实例化）

在我不知道的多种形式中使用相同的formcontrol是否有一些规则？