Syncfusion Angular ejs-grid：勾选/取消列时切换另一列校验规则

直接修改列的validationRules不会生效，是因为Grid初始化后已创建了对应的表单验证器，后续修改列配置不会自动同步到已初始化的验证实例。需要通过以下步骤动态更新验证规则：

1. 导入必要模块
   确保引入FormValidator来管理表单验证：

   import { FormValidator } from '@syncfusion/ej2-inputs';
   

2. 配置复选框列的change事件
   在列定义中给复选框列绑定change事件，同时保留目标列的初始验证规则：

   columns: [
     {
       field: 'needFill',
       headerText: '需填写目标字段',
       editType: 'booleanedit',
       editParams: {
         change: (args: any) => this.toggleRequired(args)
       }
     },
     {
       field: 'targetContent',
       headerText: '目标内容',
       validationRules: { required: false }
     }
   ]
   

3. 实现动态修改验证规则的方法
   在change事件中，获取当前编辑表单的验证实例，修改目标字段的规则并触发重新验证，同时同步更新列配置确保后续编辑生效：

   @ViewChild('grid') grid!: GridComponent;
   
   toggleRequired(args: any) {
     // 根据编辑模式获取表单元素（dialog/inline通用写法）
     let formElement: HTMLElement | null = null;
     if (this.grid.editModule.dialogObj?.content) {
       // 弹窗编辑场景
       formElement = this.grid.editModule.dialogObj.content.querySelector('.e-edit-form');
     } else {
       // 行内编辑场景
       formElement = args.closest('.e-row')?.querySelector('.e-edit-form');
     }
   
     if (!formElement) return;
   
     // 获取表单验证实例
     const validator = FormValidator.getInstance(formElement) as FormValidator;
     // 更新目标字段的必填规则
     validator.addRules('targetContent', { required: args.checked });
     // 立即验证目标字段
     validator.validate('targetContent');
   
     // 同步更新列配置，确保下次编辑时规则生效
     const targetColumn = this.grid.columns.find(col => col.field === 'targetContent');
     if (targetColumn) {
       targetColumn.validationRules = { required: args.checked };
     }
   }
   

关键说明 #

• 必须通过FormValidator实例修改规则，直接改列的validationRules只会影响未来的编辑会话，无法更新当前已打开的编辑表单
• 区分编辑模式（弹窗/行内）获取对应的表单元素，确保在不同场景下都能正常工作
• 调用validate方法触发实时验证，让用户立即看到必填状态的变化

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