Angular提交ngForm表单报类型不匹配错误无法获取表单值如何解决

你在模板中通过#policydetails="ngForm"获取到的是Angular内置的NgForm表单实例对象，并非你自定义policyDetails接口结构的表单值对象。把NgForm类型的实例直接传入参数类型为policyDetails的方法时，就会触发类型不匹配的编译报错。

1. 调整TS文件中的提交方法逻辑，NgForm实例的value属性才是所有绑定了ngModel的控件聚合生成的表单值对象，结构和你定义的接口匹配。
   首先在TS文件顶部导入NgForm类型，再修改提交方法：

   // 顶部添加导入
   import { NgForm } from '@angular/forms';
   
   // 接口建议遵循TS规范用大驼峰命名，不修改也可正常运行
   interface PolicyDetails {
     surveyChecked: boolean;
     title: string;
     name: string;
     address1: string;
     address2: string;
     address3: string;
     address4: string;
     address5: string;
     postcode: string;
     telephone: string;
     telephone_work: string;
     telephone_mobile: string;
     email: string;
     policy_no: string;
   }
   
   // 修改后的提交方法
   onClickSubmit(policyForm: NgForm) {
     const formData = policyForm.value as PolicyDetails;
     alert(formData.title);
     // 后续业务逻辑直接使用formData即可，它包含所有表单控件的值
   }
   

2. 检查所有表单控件：每个绑定了ngModel的控件必须设置name属性，且属性值和接口字段名完全一致，否则对应值不会被聚合到表单值中，比如：

   <!-- 标题输入框示例 -->
   <input type="text" ngModel name="title">
   <!-- 复选框示例 -->
   <input type="checkbox" ngModel name="surveyChecked">
   

你现有的表单标签代码不需要做任何修改，改完以上两点即可正常运行。

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