Removing ngModel from a component - angular-components

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?

Answer 1

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