Angular - Devextreme：如何在 typescript 中获取 dxi-item 的值？

Question

我有一个在弹出模式下进行编辑的数据网格。我有 2 个数据字段，密码和确认密码，我想添加一个验证规则，以便密码和确认密码匹配。我的问题是我无法获取密码字段值来与之进行比较。

我的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>

我的打字稿：

  passwordComparison = () => '';

如何获取“”中的密码数据字段值以进行比较？

我尝试了很多东西，不确定我是否以正确的方式使用它们。我尝试将 formData 添加到 dxo-form，我还尝试将 #pass 添加到 Password dxi-item 的数据字段中，并从 pass with view child 中获取值，但我没有获得任何值……不确定我是否正确使用了它们。

Answer 1

我建议使用

rowIndex

访问

comparisonTarget

函数内的行数据。当前

rowIndex

可在

onEditorPrepared

事件中获得。

例子：

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

---

cellValue

方法记录在here.

onEditorPrepared

事件记录在here.