angular 4 Kendo dialog disable action button

2019-05-24 10:08发布

问题:

I want disable 'Save' button if 'TotalUnits' < 0 . How can I disable actions 'Save' button?

Main Component:

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;
  }

AllocationComponent - Dialog:

  @Input() public TotalUnits: number;

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

回答1:

When you want to disable an input you can add the [disabled] attribute binding to the tag you wish to disable.

In your case something along these lines should work:

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

I'm not particularly familiar with Kendo but you can check their documentation for more examples.



回答2:

In AllocationComponent add these lines,

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