从组件中移除 ngModel

Posted 2023-03-13

【中文标题】从组件中移除 ngModel

【英文标题】：Removing ngModel from a component

【发布时间】：2018-10-22 10:43:51

【问题描述】：

我为我的 Angular 应用程序创建了一些组件，在将我的项目升级到 Angular 6 版后，我收到了一条让我担心的消息。

看起来您在同一个表单字段上使用 ngModel 表单控件。 支持使用 ngModel 输入属性和 ngModelChange 事件 Angular v6 中已弃用反应形式指令并将被删除 在 Angular v7 中。

For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlDirective#use-with-ngmodel

这是由于我的以下组件：

<input type="text" id="id" name="name" [formControl]="ctrl" [(ngModel)]="value" appPfMaskCpf="999.999.999-99" placeholder="placeholder"
  class="form-control">

<div *ngIf="flagCpfInvalido && value.length > 0">
  <small class="text-danger">
    CPF inválido.
  </small>
  <br>
</div>

很简单，它接收一个输入，然后我检查值。

在这种情况下，如何删除对 ngModel 的使用？

【问题讨论】：

angular 6 warning for using formControlName and ngModel的可能重复

【参考方案1】：

您不应该使用ngModel，它是响应式表单中模板驱动表单的一部分。

您可以使用formControlName 设置值，而不是使用ngModel 设置值：例如：

<form [formGroup]="form">
   <input formControlName="first">
</form>

在组件中设置这个值：this.form.get('first').setValue('some value');

或者您可以选择暂时关闭控制台警告：

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

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

更多详情请访问documentation