Removing ngModel from a component

Question

I have some components created for my angular application, and after upgrading my project to version 6 of Angular, I have received a message that worries me.

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

This is due to my following component:

<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>

It is very simple, it receives an input and I check the value.

How can I remove the use of ngModel in this case?

Possible duplicate of [angular 6 warning for using formControlName and ngModel](https://stackoverflow.com/questions/49918503/angular-6-warning-for-using-formcontrolname-and-ngmodel) — Masoud Bimmar, May 17 '19 at 09:35

score 0 · Answer 1 · answered Nov 09 '18 at 16:50

You should not be using ngModel which is part of template-driven form inside a Reactive form.

In stead of setting values using ngModel you can set the value using formControlName: Ex:

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

Set this value in component: this.form.get('first').setValue('some value');

Or you can choose to silence the console warning for now:

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.

More details are available in documentation

Removing ngModel from a component

1 Answers1