angular - 角度 9 形式的两种方式绑定

Question

Angular 9 形式的两种方式绑定我尝试在表单中使用 [(ngmodel)] 但它给出错误这在 Angular 6 及更高版本中被贬低

Answer 1

具有反应形式的 ngModel

Angular v6 中已弃用对使用ngModel输入属性和ngModelChange事件和响应式表单指令的支持，并将在未来版本的 Angular 中删除。

现在已弃用：

<input [formControl]="control" [(ngModel)]="value">

this.value = 'some value';

由于几个原因，这已被弃用。首先，开发人员发现这种模式令人困惑。似乎正在使用实际的ngModel指令，但实际上它是响应式表单指令上名为ngModel的输入/输出属性，它近似于该指令的一些行为，但不是全部。它允许获取和设置值以及拦截值事件，但是ngModel的一些其他功能，例如使用ngModelOptions延迟更新或导出指令，不起作用。

此外，这种模式混合了模板驱动和响应式表单策略，这阻碍了利用这两种策略的全部优势。在模板中设置值违反了响应式表单背后与模板无关的原则，而在类中添加FormControl / FormGroup层会消除在模板中定义表单的便利性。

要在移除支持之前更新代码，您需要决定是坚持使用响应式表单指令（并使用响应式表单模式获取/设置值）还是切换到模板驱动的指令。

之后（选择 1 - 使用反应形式）：

<input [formControl]="control">

this.control.setValue('some value');

之后（选择 2 - 使用模板驱动的表单）：

<input [(ngModel)]="value">

this.value = 'some value';

默认情况下，当您使用此模式时，您将在开发模式下看到一次弃用警告。您可以选择通过在导入时为ReactiveFormsModule提供配置来消除此警告：

imports: [
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]

或者，您可以选择为该模式的每个实例显示一个单独的警告，配置值为"always"。这可能有助于在代码更新时跟踪模式在代码中的哪个位置被使用。

参考：

https://angular.io/guide/deprecations#ngmodel-with-reactive-forms