使用Angular Material开发Angular表单遇问题，新手求解决方案

基础依赖校验 #

• 确认当前功能模块已导入表单所需的基础模块：使用响应式表单需导入ReactiveFormsModule，使用模板驱动表单需导入FormsModule，漏导入会导致表单绑定完全失效
• 确认已导入用到的Angular Material组件对应模块：表单场景必导MatFormFieldModule、MatInputModule，用到下拉选择、单选、复选框等组件时，也要单独导入对应MatSelectModule、MatRadioModule、MatCheckboxModule等模块

表单绑定逻辑校验 #

• 响应式表单场景：核对TS文件中定义的FormGroup、FormControl名称，和模板中formGroup、formControlName属性的拼写完全一致，大小写敏感不要写错
• 模板驱动表单场景：所有绑定了ngModel的Material表单控件必须同时配置name属性，缺少name属性会导致双向绑定失效

样式与主题校验 #

• 确认全局样式文件（styles.css/styles.scss）中已正确引入Angular Material主题，无论是官方预构建主题还是自定义主题，未引入主题会导致组件样式错乱、浮层/提示无法正常显示
• 排查是否有全局自定义样式、组件内样式覆盖了Material的内置样式，可以临时注释自定义样式测试是否是样式冲突导致的问题

常见异常场景针对性排查 #

• 验证提示不显示：确认验证错误提示写在mat-error标签内，且对应的FormControl已触发touched或dirty状态，默认只有用户交互过的字段才会显示错误提示
• 字段无法输入：检查FormControl是否被设置为disabled状态，或者模板中是否误加了readonly、disabled属性
• 提交无法获取值：确认表单的提交事件绑定的是(ngSubmit)而非原生submit事件，提交前可以先打印FormGroup.value核对绑定结果

内容的提问来源于stack exchange，提问作者mr._hayatt