时间戳

首页 > 解决方案 > 按钮禁用和 ngIf 在相同条件下工作

javascript - 按钮禁用和 ngIf 在相同条件下工作

问题描述

我创建了一个材质对话框，并两次调用相同的方法 - 内部*ngIf和内部按钮[disabled]属性。

我的材质对话框：

<div mat-dialog-content>
 <p>Insert package name:</p>
  <mat-form-field>
   <mat-label class="font-weight-bold">Package name</mat-label>
   <input matInput #newPackageName>
  </mat-form-field>
</div>
<ng-container *ngIf="existPackageName(newPackageName.value)">
 <p class="alert alert-danger" role="alert">Exist package with same name!!!</p>
</ng-container>
<div mat-dialog-actions>
 <button mat-button class="btn btn-secondary" [mat-dialog-close]="newPackageName.value" cdkFocusInitial [disabled]="existPackageName(newPackageName.value)">Create
 </button>
 <button mat-button class="btn btn-secondary" (click)="onNoClick()">Cancel</button>
</div>

我的打字稿：


    @Component({
      selector: 'new-package-dialog',
      templateUrl: './new-package/new-package-dialog.component.html',
      styleUrls: ['app.component.css']
    })
    export class NewPackageDialog {

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

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

      existPackageName(newPackageName: string) {
        return newPackageName.length > 0 && this.data.packages.some(package => package.name === newPackageName);
      }
    }

    export interface DialogData {
      packages: IPackage[];
    }

问题：有没有办法调用existPackageName(newPackageName.value)一次方法并将结果传递给按​​钮[disabled]属性？

标签： javascripthtmlangularangular-material

解决方案

您可以在组件中：

this.shouldDisable = this.existPackageName(this.newPackageName)

然后简单地说：

<input matInput [(ngModel)]="newPackageName">
... 
<ng-container *ngIf="shouldDisable">
...
<button [disabled]="shouldDisable" ..rest of the properties>

推荐阅读