如何在Angular 7上同时使用3种不同的条件来禁用属性

Question

我有一个Angular表格。

<form class="p-16" name="poMaterialDetailForm [formGroup]="poMaterialDetailForm">

在表单中我有一个保存按钮。

<button mat-raised-button 
        class="save-poMaterialDetail-button ml-32 mr-8"
        [disabled]="poMaterialDetailForm.invalid || poMaterialDetailForm.pristine"
        <span>SAVE</span>
</button>

disabled属性允许我在表单中没有更改时禁用按钮。如果更改了表单值，则保存按钮将变为活动状态。

我刚添加了用户权限功能，对于没有编辑权限的用户也禁用了保存按钮。

<button mat-raised-button
        class="save-clientManagementDetail-button ml-32 mr-8"
        [disabled]="isDisabled('ClientManagement','Edit')"
        *ngIf="pageType ==='edit'" (click)="saveClientManagementDetail()">
    <span>SAVE</span>
</button>

现在我想将这两个功能用于禁用属性。这是我的条件：

[disabled]="(clientManagementDetailForm.invalid || clientManagementDetailForm.pristine) 
&& isDisabled('ClientManagement','Edit')"

不幸的是，我不能让这个条件起作用。当我单独使用条件时它们可以工作，但是当我尝试同时使用它们时，禁用的属性不会相应地改变。

希望条件清楚。如果有人能对这个问题有所了解，我将不胜感激。

干杯，约翰尼

Answer 1

如果我理解正确，你必须将AND更改为OR：

(clientManagementDetailForm.invalid || clientManagementDetailForm.pristine)
  || isDisabled('ClientManagement','Edit')

因为如果表单无效或者用户没有编辑权限，您不需要提交按钮。