时间戳

首页 > 解决方案 > 如何同时使用 3 个不同的条件来禁用 Angular 7 上的属性

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

问题描述

我有一个角形式。

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

不幸的是，我无法让这个条件发挥作用。当我单独使用这些条件时，它们会起作用，但是当我尝试同时使用它们时，禁用的属性不会相应地正确更改。

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

干杯，约翰尼

标签： angularattributesangular-materialconditional

解决方案

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

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

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

推荐阅读