angular11devextreme-angular

dxi-Item Disable/Enable on button Click event

I've set a dx-form that has multiple dxi-item. when I change the value of isDisabled (bool) on the button click event, it disables all the buttons on my forms. What i'd like to do is on click of new Button it should only enable TextBox, and keep the click event for other buttons.

Here is the Issue

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>

Solution

  • In the case of using dx-from just diable the item group with disable property, it will only disable dxi-item.