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

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')

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

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

How to use 3 different condition at the same time for disable attribute on Angular 7

conditional

attributes

angular-material

angular