Question

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

看起来你在同一个表单字段上使用ngModel formControl。支持使用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的使用？

Answer 1

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

代替使用ngModel设置值，可以使用formControlName设置值：例如：

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

在组件this.form.get('first').setValue('some value');

中设置此值

或者您可以选择暂时忽略控制台警告：

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

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

更多详细信息，请访问documentation

从组件中删除ngModel

1 个答案: