angular-components - 从组件中删除 ngModel

Question

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

It looks like you're using ngModel on the same form field as formControl. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in 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'});
 ]

To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.

更多详细信息请参阅 documentation