Angular6 Material Dialog предотвращает закрытие при нажатии Enter

Question

У меня есть диалог входа в систему и я хочу, чтобы он не закрывался автоматически при нажатии Enter.

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

Вот что я сделал:

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

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

this.dialogRef.disableClose = true; по-прежнему закрывает диалоговое окно, даже если ответ вернулся как ошибка.

Как мне это сделать?

Редактировать

login.component.ts

<mat-toolbar>
    <span>Login</span>
</mat-toolbar>
<mat-card class="my-card">
    <div *ngIf="error" style="color: red;">{{error}}</div><br />
    <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.'; 
        }
    );       
}

Answer 1

Я полагаю, что это потому, что ваша кнопка "ЗАКРЫТЬ" не установлена ​​на type = "button", и я ДУМАЮ, что это первый элемент, который имеет фокус, поэтому при нажатии кнопки ввода вы вводите эту кнопку, которая по умолчанию будетотправить форму.Добавьте type = "button", и это должно решить эту проблему.

Также для записи, последняя версия углового материала имеет md-button, автоматически добавляющую type = "button" по умолчанию (если вы не укажете type = "submit""), чтобы избежать такого типа ситуаций

Используйте это

 <mat-card-actions>
        <button  mat-raised-button type="button" (click)="onNoClick()" color="primary">Close</button>
        <button  mat-raised-button type="submit" 
            [disabled]="!(loginForm.controls.email.valid && loginForm.controls.password.valid)" 
            color="accent">
            Login
        </button>
    </mat-card-actions>