angular 6 warning for using formControlName and ngModel

Question

I recently upgraded the angular version to 6-rc. I got following warning

It looks like you're using ngModel on the same form field as formControlName. 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/FormControlName#use-with-ngmodel

What does it say exactly? the link does not have any fragment for #use-with-ngmodel

I guess I need to remove ngModel and use formGroup as my data binding object.

Solution 1

If you're looking for Angular 6 documentation right now then use https://next.angular.io

https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

So you have 3 options:

1. use Reactive forms

2. use Template driven forms

3. silence warning (not recommended)

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

Solution 2

Remove [(ngModel)] from every field within formGroup contains formControlName and set value in controller class as follows simply this.form.get('first').setValue('some value'); do not close or silence warnings explicitly

Solution 3

add

[ngModelOptions]="{standalone: true}" 

You can read more from angular website https://angular.io/api/forms/NgModel