Angular表单验证异常：未填必填项仍可提交表单

核心问题 #

代码未利用Angular响应式表单的整体有效性状态：提交按钮没有根据表单是否有效设置禁用，且onSubmit方法未校验表单有效性，导致即使部分必填项为空，只要countryId有效，就能提交表单。

修复步骤 #

1. 给提交按钮添加禁用逻辑

修改模板中的提交按钮，绑定disabled属性到表单的valid状态：

<button mat-flat-button color="primary"
        type="submit"
        [disabled]="!form.valid">
  {{ this.id ? "Save" : "Create" }}
</button>

2. 在提交方法中增加表单有效性校验

在onSubmit方法开头添加校验，避免按钮被绕过（如手动触发提交）的情况：

onSubmit() {
  // 先校验表单是否有效，无效则直接返回
  if (!this.form.valid) {
    return;
  }
  
  var city = (this.id) ? this.city : <City>{};
  // 后续原有代码保持不变...
}

修复原理 #

• 按钮的[disabled]="!form.valid"会根据表单整体有效性自动禁用/启用，只有当所有必填控件都通过验证时，按钮才可用
• onSubmit开头的校验作为兜底，确保即使通过其他方式触发提交（如控制台调用），也不会处理无效的表单数据

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