时间戳

首页 > 解决方案 > dxi-Item 在按钮单击事件上禁用/启用

angular11 - dxi-Item 在按钮单击事件上禁用/启用

问题描述

我设置了一个包含多个 dxi-item 的 dx-form。当我在按钮单击事件上更改 isDisabled (bool) 的值时，它会禁用我表单上的所有按钮。我想做的是点击新按钮它应该只启用文本框，并为其他按钮保留点击事件。

这是问题

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
})
export class TestComponent implements OnInit {
  TESTMaster = {
    Name: '',
    CODE: 0,
  };

  IsDisable: boolean;
  constructor() {
    this.IsDisable = false;
  }

  BtnNewClick(e) {
    this.IsDisable = true;
  }

  BtnSomeRandomClick(e) {
    this.IsDisable = false;
  }

  ngOnInit(): void {}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="dx-card" style="margin: 100px;padding: 10px;">

  {{!IsDisable}}
  <dx-form id="form" [formData]="TESTMaster" labelLocation="left">

    <dxi-item itemType="group" [disabled]='!IsDisable' caption="TEST">

      <dxi-item dataField="Name" [editorOptions]="{elementAttr: { class: 'form-text' }}">
        <dxo-label location="left" [showColon]='true' alignment="left"></dxo-label>
      </dxi-item>
    </dxi-item>

    <dxi-item itemType="group" [colCount]='2'>
      <dxi-item>
        <dx-button type="default" text="NEW" icon="add" (onClick)="BtnNewClick($event)">
        </dx-button>
      </dxi-item>

      <dxi-item>
        <dx-button type="default" text="SOME RANDOM" icon="add" (onClick)="BtnSomeRandomClick($event)">
        </dx-button>
      </dxi-item>
    </dxi-item>
  </dx-form>
</div>

标签： angular11devextreme-angular

解决方案

在使用 dx-from 的情况下，只禁用具有 disable 属性的项目组，它只会禁用 dxi-item。

推荐阅读