ОШИБКА TypeError: Невозможно прочитать свойство 'value' из undefined: Angular 6

Question

Как я уже упоминал в своем заголовке, я получил эту консольную ошибку при получении данных из двух полей ввода нажатием кнопки.

<mat-form-field class="col-sm-12">
        <mat-label>Enter email</mat-label>
        <input #fileInput1 [readonly]="isSignUpEmailChange" #mEmail matInput pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" [formControl]="signUpEmail"
            placeholder="Email" required>
        <mat-error *ngIf="signUpEmail.errors?.required">Please fill out this field</mat-error>
        <mat-error *ngIf="signUpEmail.errors&&signUpEmail.errors.pattern">Enter the valid email</mat-error>
    </mat-form-field>

<mat-form-field *ngIf="isNewMail" class="col-sm-12">
    <mat-label>Set password</mat-label>
    <input #mPassword #fileInput2 matInput placeholder="Password" [pattern]="selectedPattern" [formControl]="signInPassword" placeholder="Password"
        required>
    <mat-error *ngIf="signInPassword.errors?.required">Please fill out this field</mat-error>
    <mat-error *ngIf="signInPassword.errors&&signInPassword.errors.pattern">{{errorMgs}}</mat-error>
</mat-form-field>

Здесь # fileInput1, # fileInput2 используются для программного выбора этих полей в зависимости от некоторых условий

@ViewChild('fileInput1') fileInput1: ElementRef;
@ViewChild('fileInput2') fileInput2: ElementRef;

delay(1000).then(_ => { this.fileInput1.nativeElement.click() });
delay(1000).then(_ => { this.fileInput1.nativeElement.click() });

Здесь мне нужно получить значения электронной почты и пароля при нажатии кнопки

<button
    (click)="signUp(mEmail.value,mPassword.value)"
    [disabled]="signInPassword.invalid"
    class="loginBtn"
    style="margin-left:15px;margin-right:15px;margin-top:10px"
    mat-raised-button color="warn"
>
Signup
</button>

Answer 1

используйте скрытый вместо * ngIf для ввода пароля

ngЕсли удалить элемент из DOM, вы можете получить доступ к mPassword.value

как

<mat-form-field [hidden]="!isNewMail" class="col-sm-12">
    <mat-label>Set password</mat-label>
        <input #mPassword #fileInput2 matInput placeholder="Password" [pattern]="selectedPattern" [formControl]="signInPassword" placeholder="Password"
                        required>
    <mat-error *ngIf="signInPassword.errors?.required">Please fill out this field</mat-error>
    <mat-error *ngIf="signInPassword.errors&&signInPassword.errors.pattern">{{errorMgs}}</mat-error>
</mat-form-field>