自定义Schema渲染表单中Mat-Select控件校验规则修改问题

你的Mat-Select绑定的control来自继承的AbstractWidgetComponent，这类基于Schema渲染的表单组件，FormControl通常是根据Schema的校验规则自动生成的，必填校验一般由Schema里的required字段触发。下面是几个可行的解决办法：

1. 修改Schema的必填约束 #

先查看对应字段的Schema配置，看是否存在required: true的设置。如果有，直接将该属性改为false或者删除即可——这类表单框架大多会严格按照Schema生成校验规则，这是最直接的解决方式。

示例Schema修改：

{
  "type": "string",
  "enum": ["option1", "option2"],
  "required": false // 原设置为true，修改为false
}

2. 手动移除FormControl的必填校验器 #

如果Schema无法修改，或者框架没有严格遵循Schema规则，你可以在组件的初始化钩子中手动移除校验逻辑。在你继承自AbstractWidgetComponent的组件类里，添加如下ngOnInit代码：

ngOnInit() {
  super.ngOnInit(); // 先执行父类的初始化逻辑
  if (this.control) {
    // 清空所有校验器（无需保留其他校验时使用）
    this.control.setValidators(null);
    // 更新控件校验状态，避免触发不必要的表单事件
    this.control.updateValueAndValidity({ emitEvent: false });
  }
}

若需要保留其他校验器，仅移除必填校验，可以使用以下代码：

ngOnInit() {
  super.ngOnInit();
  if (this.control && this.control.validator) {
    // 将校验器转为数组格式，方便过滤
    const validators = Array.isArray(this.control.validator) 
      ? this.control.validator 
      : [this.control.validator];
    // 过滤掉必填校验器
    const newValidators = validators.filter(validator => validator !== Validators.required);
    
    this.control.setValidators(newValidators.length ? newValidators : null);
    this.control.updateValueAndValidity({ emitEvent: false });
  }
}

3. 重写父类的控件创建逻辑 #

AbstractWidgetComponent继承自ControlWidget，这个父类大概率负责根据Schema生成FormControl。你可以查看ControlWidget的源码，找到它添加Validators.required的逻辑，然后在子类中重写对应的方法跳过这一步。

比如若父类存在createControl方法，重写示例如下：

override createControl(): FormControl {
  const control = super.createControl();
  // 移除必填校验器
  if (control.validator) {
    const validators = Array.isArray(control.validator) ? control.validator : [control.validator];
    control.setValidators(validators.filter(v => v !== Validators.required));
    control.updateValueAndValidity();
  }
  return control;
}

4. 多选模式的特殊处理 #

如果你的Mat-Select开启了multiple模式，部分框架会默认添加必填校验以确保至少选择一个选项。这种情况除了上述方法，还可以检查框架是否有配置项能关闭该默认行为，或者直接用手动移除校验器的方式解决。

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