Angular-Devextreme：DataGrid弹窗编辑中如何获取Password字段值？

要实现ConfirmPassword与Password的一致性验证，核心是正确获取Password字段的输入值，以下是可行的方案：

步骤1：给表单添加模板引用 #

在dxo-form标签上添加模板引用变量，用于后续获取表单实例：

<dxo-form #editForm>
  <!-- 原有的Password、ConfirmPassword等表单项 -->
</dxo-form>

步骤2：在TypeScript中获取表单实例并实现比较逻辑 #

通过ViewChild获取表单组件实例，然后在passwordComparison函数中调用表单的getEditor方法获取Password编辑器的值：

import { Component, ViewChild } from '@angular/core';
import { DxFormComponent } from 'devextreme-angular';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild('editForm', { static: false }) editForm: DxFormComponent;

  passwordComparison = () => {
    // 确保表单实例已初始化
    if (!this.editForm?.instance) return '';
    // 获取Password对应的编辑器
    const passwordEditor = this.editForm.instance.getEditor('Password');
    // 返回编辑器的当前值
    return passwordEditor ? passwordEditor.option('value') : '';
  };
}

为什么之前的方法没生效？ #

• 直接给dxi-item加模板引用（#pass）无法获取到编辑器实例：dxi-item是表单项容器，真正的编辑器（这里是dxTextBox）是表单内部动态创建的，必须通过表单实例的getEditor方法获取。
• 若尝试绑定formData，需确保formData与弹窗编辑的数据源同步，而通过表单实例获取编辑器值的方式更直接，无需额外维护数据绑定逻辑。

内容的提问来源于stack exchange，提问作者Panos