点击重置按钮时form提示invalid，如何移除必填下拉框的红色边框

问题原因 #

你的现有逻辑存在三个核心问题：

• 重置时错误将submitClickedMain赋值为true，该变量通常是控制「提交后显示校验错误」的开关，保持为true时表单为空就会触发红色边框样式
• 主动调用clearValidators、setValidators(null)清除了表单全局校验规则，会导致后续提交时必填校验完全失效
• 只更新了type单个字段的校验状态，其余两个下拉字段的残留校验错误没有被清除

修正方案 #

直接替换你的resetSearch方法为以下代码即可：

resetSearch() {
    // 重置提交标记，关闭提交后的错误样式触发逻辑
    this.submitClickedMain = false;
   
    // 重置所有表单字段值，同时会自动清空控件的touched、dirty状态
    this.searchForm.reset();
   
    // 批量更新整个表单的校验状态，清除残留的校验错误标识
    this.searchForm.updateValueAndValidity({ onlySelf: true, emitEvent: false });
}

补充说明 #

• 不需要修改提交按钮的原有逻辑，点击提交时将submitClickedMain设为true再执行校验，未选择的必填字段依然会正常显示红色边框提示
• 如果你的红色边框样式绑定的是控件的touched状态而非提交标记，调用reset()方法已经默认重置了所有控件的交互状态，不需要额外处理

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