Angular 4文本输入框默认值设置：MySQL持久化NULL问题排查

这个问题我之前也碰到过，核心原因是Angular的双向绑定[(ngModel)]会完全覆盖input标签的value属性。你在模板里写的value="bonjour"其实会被bateau.libelle的初始值给覆盖掉，如果你的组件里没有给bateau.libelle赋值，它默认就是undefined或者null，所以提交到后端的时候自然存的是NULL。

正确的解决步骤： #

1. 在组件类中初始化模型变量
   这是最规范的做法，因为双向绑定的核心是组件中的模型数据，而不是模板里的value属性。打开你的组件.ts文件，找到bateau变量的定义，给libelle设置初始值：

   // 假设你的bateau是一个普通对象，如果是自定义类实例的话类似处理
   bateau = {
     libelle: 'bonjour',
     // 其他属性...
   };
   
   // 如果是自定义类的实例：
   // import { Bateau } from './bateau.model';
   // bateau = new Bateau();
   // this.bateau.libelle = 'bonjour';
   

2. 验证绑定是否生效
   模板里的代码不需要修改，保持原来的即可：

   <div class="col-sm-3">
     <label style="font-family: verdana">Titre:</label>
     <input style="font-size: 13px;" type="text" class="form-control" id="libelle" name="libelle" [(ngModel)]="bateau.libelle" #libelle="ngModel" required >
   </div>
   

   现在页面加载时，输入框会显示"bonjour"，而且bateau.libelle的初始值就是这个字符串，提交表单时后端就能接收到正确的值，不会是NULL了。

3. 额外排查点
   如果还是有问题，可以在提交方法里打印一下bateau.libelle的值，确认它不是null：

   onSubmit() {
     console.log('bateau.libelle:', this.bateau.libelle);
     // 你的提交逻辑...
   }
   

   如果打印出来是正确的"bonjour"，那就要检查后端接口是否正确接收了这个参数；如果还是null，那说明组件里的初始化没做好，再检查变量定义的位置和时机。

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