Angular 6-rc升级后formControlName与ngModel混用警告问题咨询

这个警告的核心意思非常明确：你在同一个表单控件上同时使用了模板驱动表单的ngModel（包括ngModel输入属性和ngModelChange事件）和响应式表单的formControlName指令，这种用法从Angular v6开始被标记为废弃，到Angular v7会被彻底移除。

为什么会出现这个警告？ #

Angular的表单体系分为两种独立设计的模式：

• 模板驱动表单：依赖ngModel、ngForm等指令，表单逻辑主要在模板中实现
• 响应式表单：依赖FormControl、FormGroup、formControlName等API，表单逻辑集中在组件类中

这两种模式的状态管理机制不同，混用会导致表单状态同步冲突——Angular无法确定应该优先遵循哪一种模式的状态规则，同时也会让代码逻辑变得混乱、难以维护。官方为了规范表单使用方式，决定废弃这种跨模式混用的写法。

如何解决这个问题？ #

你需要二选一，统一使用一种表单模式：

• 如果继续使用响应式表单：移除控件上的ngModel和ngModelChange相关代码，完全通过组件类中的FormControl实例处理值的读取与变更。比如原本用ngModelChange监听值变化，现在可以改用formControl.valueChanges订阅。
• 如果切换为模板驱动表单：移除formControlName，完全依赖ngModel绑定和处理表单值，配合ngForm管理整个表单状态。

举个简单的示例：
原来的混用代码：

<input formControlName="username" [(ngModel)]="userName">

改成响应式表单写法：

<input formControlName="username">

组件类中处理值：

// 获取值
const username = this.form.get('username').value;

// 监听值变化
this.form.get('username').valueChanges.subscribe(value => {
  // 处理逻辑
});

改成模板驱动表单写法：

<input [(ngModel)]="userName" name="username">

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