角材料反应形式。根据下拉选择禁用复选框

时间:2021-02-16 10:54:28

标签: angular-material angular-reactive-forms

我有一些代码可以根据下拉选择禁用复选框。我现在还想根据下拉列表中的选择强制取消选中。

html:

<ng-container matColumnDef="permissions">
<th mat-header-cell class="text-center" *matHeaderCellDef>Permissions</th>
<td mat-cell *matCellDef="let p" class="text-center">
     <mat-select [formControl]="p.item.permissionsControl">
        <mat-option [value]="permissionOptions.NoAccess">No Access</mat-option>
        <mat-option [value]="permissionOptions.ReadOnly">Read Only</mat-option>
        <mat-option [value]="permissionOptions.Modify">Modify</mat-option>
        <mat-option [value]="permissionOptions.Confirm">Confirm</mat-option>
        <mat-option [value]="permissionOptions.Full">Full</mat-option>
        </mat-select> 
</td>
</ng-container>

<ng-container matColumnDef="canConfirmOwnChanges">
    <th mat-header-cell class="text-center" *matHeaderCellDef>Can Confirm Own Changes</th>
    <td mat-cell *matCellDef="let p" class="text-center">
        
        <span *ngIf="p.item.permissionsControl.value == permissionOptions.Confirm || p.item.permissionsControl.value == permissionOptions.Full"> 
        
            <mat-checkbox [disabled]="false" [formControl]="p.item.canConfirmOwnChangesControl"></mat-checkbox>
        </span>
        <span *ngIf="p.item.permissionsControl.value == permissionOptions.NoAccess || p.item.permissionsControl.value == permissionOptions.ReadOnly || p.item.permissionsControl.value == permissionOptions.Modify">
            <mat-checkbox  [disabled]="true" [formControl]="p.item.canConfirmOwnChangesControl"></mat-checkbox>
        </span>
    </td>
</ng-container>

添加 [checked]="false" 在这里不起作用。

任何建议将不胜感激!

1 个答案:

答案 0 :(得分:0)

我通过为下拉列表订阅 FormControl 上的 valueChanges 来实现这一点,然后启用/禁用并设置复选框 FormControl 上的值