我有一个登录对话框,希望防止它在按下输入时自动关闭 .

更具体地说,当用户输入凭证并按下回车并且凭证的响应返回为错误时,我希望对话框保留(因此我可以向他们显示一些错误消息并让用户再次尝试) .

所以这就是我做的:

export class LoginComponent {
    constructor(public dialogRef: MatDialogRef<LoginComponent>) { }

    onSubmit(): void {  
        this.authService.login(...)
            .subscribe(res => { 
                ... 
             },
            error => {
                this.dialogRef.disableClose = true;
            }
    }
}

this.dialogRef.disableClose = true; 仍然关闭对话框,即使响应返回错误 .

我该怎么做?

Edit

login.component.ts

<mat-toolbar>
    <span>Login</span>
</mat-toolbar>
<mat-card class="my-card">
    <div *ngIf="error" style="color: red;">{{error}}</div>
<form (ngSubmit)="onSubmit()" [formGroup]="loginForm"> <mat-card-content> <mat-form-field appearance="outline" class="full-width"> <mat-label>Email</mat-label> <input matInput placeholder="Email" formControlName="email" [formControl]="emailFormControl" [errorStateMatcher]="matcher" /> <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')"> Enter valid email address </mat-error> <mat-error *ngIf="emailFormControl.hasError('required')"> Required field </mat-error> </mat-form-field> <mat-form-field appearance="outline" class="full-width"> <mat-label>Password</mat-label> <input matInput type="password" placeholder="Password" formControlName="password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher" /> <mat-error *ngIf="passwordFormControl.hasError('required')"> Required field </mat-error> </mat-form-field> </mat-card-content> <mat-card-actions> <button mat-raised-button (click)="onNoClick()" color="primary">Close</button> <button mat-raised-button [disabled]="!(loginForm.controls.email.valid && loginForm.controls.password.valid)" color="accent"> Login </button> </mat-card-actions> </form> </mat-card>

login.component.ts

onSubmit(): void {       
    if (this.loginForm.invalid) {
        return;
    }             
    this.authService.login(this.loginForm.controls.email.value, this.loginForm.controls.password.value)
        .subscribe(res => {               
            if (res) {
                alert("logged in");              
            }   
        },
        error => {                  
            this.error = 'Error! Plese try again.'; 
        }
    );       
}