Angular - Devextreme : How can i get a dxi-item's value at typescript?

Question

I have a Data Grid with editing at popup mode. I have 2 datafields, password and confirm password and i want to add a validation rule so password and confirm password match. My problem is that i cannot get passwords field value to compare it with.

My HTML:

  <dx-data-grid
    ..........
  >

  <dxo-editing
      mode="popup"
      [allowUpdating]="true"
      [allowAdding]="true"
      [allowDeleting]="true"
    >
      <dxo-popup
      ..........
      >
      </dxo-popup>
      
      <dxo-form>
      .......

      <!-- Password -->
          <dxi-item
            dataField="Password"
            editorType="dxTextBox"
            [editorOptions]="{
              stylingMode: 'outlined',
              mode: 'password',
              placeholder: 'Password'
            }"
          >
            <dxi-validation-rule
              type="required"
            ></dxi-validation-rule>
          </dxi-item>

          <!-- Confirm Password -->
          <dxi-item
            dataField="ConfirmPassword"
            editorType="dxTextBox"
            [editorOptions]="{
              stylingMode: 'outlined',
              mode: 'password',
              placeholder: 'Confirm Password'
            }"
          >
            <dxi-validation-rule
              type="required"
            ></dxi-validation-rule>
            <dxi-validation-rule
              type="compare"
              [comparisonTarget]="passwordComparison"
              message="Password and Confirm Password do not match"
            >
            </dxi-validation-rule>
          </dxi-item>

My Typescript:

  passwordComparison = () => '';

How can i get Password Datafield value inside '' to compare it?

I've tried many things, not sure if i used them the correct way. I tried adding formData to the dxo-form, i also tried adding #pass into Password dxi-item's dataField and get the value from pass with view child but i did not get any values... Not sure if i used them correctly tho.

Answer 1

I recommend using the rowIndex to access the row data inside the comparisonTarget function. The current rowIndex is obtainable inside the onEditorPreparedevent.

Example:

HTML:

<dx-data-grid
    [dataSource]="dataSource"
    (onEditorPrepared)="onEditorPrepared($event)">

    <dxo-editing
        mode="popup"
        [allowUpdating]="true"
        [allowAdding]="true"
        [allowDeleting]="true">

        <dxo-popup>
        </dxo-popup>

        <dxo-form>
            <dxi-item dataField="Password"></dxi-item>
            <dxi-item dataField="ConfirmPassword"></dxi-item>
        </dxo-form>

    </dxo-editing>

    <dxi-column dataField="Password">
        <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="ConfirmPassword">
        <dxi-validation-rule type="required"></dxi-validation-rule>
        <dxi-validation-rule
            type="compare"
            [comparisonTarget]="passwordComparison"
            message="Password and Confirm Password do not match">
        </dxi-validation-rule>
    </dxi-column>
</dx-data-grid>

---

TS:

class MyComponent {

    @ViewChild(DxDataGridComponent) grid: DxDataGridComponent;

    currentRow: number;

    constructor() {
        this.onEditorPrepared = this.onEditorPrepared.bind(this);
        this.passwordComparison = this.passwordComparison.bind(this);
    }

    onEditorPrepared(e) {
        if (e.parentType == "dataRow") {
            this.currentRow = e.row.rowIndex;
        }
    }

    passwordComparison() {
        return this.grid.instance.cellValue(this.currentRow, 'Password');
    }
}

---

The cellValue method is documented here.

The onEditorPrepared event is documented here.