如何在 angular 模态弹出窗口中进行简单的必需验证？

Question

用户打开模态框，在填写所需的输入之前应该无法单击“确定”

我尝试了 documentation 中提到的方法，但没有用

component.ts

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
  animal: string;
  name: string;
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  template: `<button mat-raised-button (click)="openDialog()">Pick one</button>
  <li *ngIf="animal">
    You chose: <i>{{animal}}</i>
  </li>`
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) { }

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

dialog.html

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input required matInput name="myInput" [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <!-- <button mat-button [disabled]="myInput.errors.required" [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> -->
     <button mat-button  [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> 

</div>

Answer 1

当用户没有填写任何数据时，简单地禁用确定按钮怎么样？像这样：

<button mat-button [disabled]="!data.animal"  [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>

Stackblick demo

您也可以将输入包裹在 <form #form="ngForm">...</form> 标签内并检查表单是否有效 [disabled]="form.invalid"

如何在 angular 模态弹出窗口中进行简单的必需验证？

How to do simple required validation in angular Modal Popup?

angular

angular-material

angular-forms