Angular表单渲染后提交重置按钮无响应 无法定位错误寻求解决

修复步骤 #

• 第一步：确认AppModule导入ReactiveFormsModule
  这是导致按钮无响应的最常见原因，响应式表单依赖该模块才能正常工作，检查app.module.ts文件：
  1. 顶部导入模块：import { ReactiveFormsModule } from '@angular/forms';
  2. 在@NgModule的imports数组中添加ReactiveFormsModule
• 第二步：修复URL校验正则错误
  你在Component.ts中定义的URL校验正则存在语法错误，\\(.|:)部分错误匹配左括号，导致所有合法URL都无法通过校验，修改为正确正则即可：

  // 错误写法
  // const reg = '(https?://)?([\\da-z.-]+)\\(.|:)([a-z.]{2,6})[/\\w .-@$#%&]*/?';
  // 正确写法
  const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-@$#%&]*/?';
  

• 第三步：修正手机号输入框类型
  当前手机号输入框设置为type="number"，会自动截断首位的0，长数字还会转为科学计数法，导致10位纯数字校验失败，修改Component.html中的Telephone输入框类型：

  <!-- 错误写法 -->
  <!-- <input id="Telephone" type="number" placeholder="7039932000" formControlName="Telephone" class="form-control" [ngClass]="{'is-invalid':submitted && f['Telephone'].errors}"/> -->
  <!-- 正确写法 -->
  <input id="Telephone" type="text" placeholder="7039932000" formControlName="Telephone" class="form-control" [ngClass]="{'is-invalid':submitted && f['Telephone'].errors}"/>
  

• 第四步：优化错误提示样式
  所有错误提示都错误添加了form-control类（输入框样式），改为Bootstrap规范的invalid-feedback类即可正常显示错误文本。

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