angular 4 Kendo 对话框禁用操作按钮

Question

如果 'TotalUnits' < 0，我想禁用 'Save' 按钮。如何禁用操作 'Save' 按钮？

主要成分：

AllocationDialog(data: any) {
        const dialog: DialogRef = this.component.dialogService.open({
          title: ' Allocations',
          content: AllocationComponent,
          actions: [
            { text: 'Save', primary: true, data },
          ],
          width: 500,
          height: 500
        });
    dialog.result.subscribe((dialogResult) => {
      if (dialogResult instanceof DialogCloseResult) {
        console.log('close');
      } else {
        console.log('action', dialogResult);
      }
    });

    const allocationsInfo = dialog.content.instance;
    allocationsInfo.TotalUnits = data.TotalUnits;
  }

分配组件 - 对话框：

  @Input() public TotalUnits: number;

 <input kendoTextBox [(ngModel)]="TotalUnits" />

Answer 1

当您想禁用输入时，您可以将 [disabled] 属性绑定添加到您希望禁用的标签。

在你的情况下，按照这些思路应该可以工作：

 <input kendoTextBox [disabled]="TotalUnits < 0" [(ngModel)]="TotalUnits" />

我对 Kendo 不是特别熟悉，但您可以查看他们的 documentation 以获取更多示例。

Answer 2

在 AllocationComponent 添加这些行，

<kendo-dialog-actions>
        <button kendoButton [disabled]="TotalUnits < 0">SAVE</button>
</kendo-dialog-actions>

angular 4 Kendo 对话框禁用操作按钮

angular 4 Kendo dialog disable action button

kendo-ui-angular2

angular