错误TypeError：无法读取undefined的属性'value'：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进行密码输入

ngIf从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>