错误类型错误：无法读取未定义的属性“值”：Angular 6答案

【问题标题】：ERROR TypeError: Cannot read property 'value' of undefined : Angular 6错误类型错误：无法读取未定义的属性“值”：Angular 6
【发布时间】：2018-09-03 18:36:04
【问题描述】：

正如我在标题中提到的，当我通过单击按钮从两个输入字段中获取数据时出现此控制台错误。

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

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

使用 hidden 而不是 *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>

【讨论】：

非常感谢@AniketAvhad 兄弟