按钮单击事件上的 dxi-Item Disable/Enable

Question

我设置了一个包含多个 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>

Answer 1

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

按钮单击事件上的 dxi-Item Disable/Enable

dxi-Item Disable/Enable on button Click event

devextreme-angular

angular11