Angular对接Spring Boot后端获取数据失败，表单无法渲染且控制台报解析错误

问题原因 #

• 字段类型与输入框类型不匹配：Utilisateur实体类中codeP（邮编）字段声明为string类型，但模板里对应邮编的<input>设置了type="number"，后端返回的字符串类型的姓名相关值被错误绑定到了数字输入框上，就抛出了你看到的无法解析字符串为数字的报错。
• 输入框id重复导致绑定错位：模板里多个输入框复用了id="name"、id="first-name"，导致label与输入框绑定错位，值也出现串值的“虚假数据”问题。
• Angular模板驱动表单写法不规范：
  1. 所有使用ngModel的表单控件必须配置name属性，否则无法正常完成双向绑定
  2. 当前的ngModel="{{u?.xxx}}"是单向绑定写法，如果要做双向绑定需要用[(ngModel)]语法，且不需要额外写value属性
• 初始值加载时序问题：组件初始化时u是未赋值状态，接口返回前u?.xxx都是undefined，容易出现初始值异常。

解决方案 #

1. 修复输入框配置 #

修改edit.html里所有输入框的id保证唯一，同时修改邮编输入框的type为text（如果邮编支持字符或者开头有0的场景），如果确认邮编全是数字也可以把实体类里的codeP改成number类型，优先推荐改输入框类型，所有输入框都补充name属性、使用双向绑定语法：

<!-- 示例修改后的输入框，其余输入框同理调整 -->
<div class="form-group a">
  <label for="nom">Nom</label>
  <input id="nom" name="nom" type="text" [(ngModel)]="u?.nom">
</div>
<div class="form-group b">
  <label for="prenom">Prénom</label>
  <input id="prenom" name="prenom" type="text" [(ngModel)]="u?.prenom">
</div>
<div class="form-group a">
  <label for="prenom_ar">الاسم بالعربية</label>
  <input id="prenom_ar" name="prenom_ar" type="text" [(ngModel)]="u?.prenom_ar">
</div>
<div class="form-group b">
  <label for="nom_ar">اللقب بالعربية</label>
  <input id="nom_ar" name="nom_ar" type="text" [(ngModel)]="u?.nom_ar">
</div>
<div class="form-group">
  <label for="zip">Code postal</label>
  <!-- 把type从number改成text -->
  <input id="zip" name="codeP" type="text" [(ngModel)]="u?.codeP">
</div>

2. 优化组件初始值 #

在edit.ts里给u初始化为空的Utilisateur实例，避免初始undefined的问题：

// 修改声明部分
public u: Utilisateur = new Utilisateur();

3. 修复表单提交逻辑 #

给<form>标签加表单指令，绑定提交事件，避免默认表单刷新行为：

<form #editForm="ngForm" (ngSubmit)="Modifier(u)">
  <!-- 其余表单内容不变 -->
  <div class="button-container">
    <button class="button" type="submit">Enregister les modifications</button>
  </div>
</form>

修改完成后重启前端服务测试即可解决报错和虚假数据问题。

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