Кнопка отключена и ngIf работают в одинаковых условиях

Question

Я создал диалоговое окно «Материал» и дважды вызываю один и тот же метод - внутри *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]?

Answer 1

Вы можете иметь в компоненте:

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

Тогда просто:

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