angular 6 warning for using formControlName and ngModel

问题

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.

回答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'});
   ]
   

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

回答3:

add

[ngModelOptions]="{standalone: true}" 

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

回答4:

Using formControl(reactive Forms) is more straightforward coupled with Rxjs so Angular team changed use of it.

Change on html file

<!-- [ngModel]='model' (ngModelChange)='changed($event)' -->

to

[formControl]="myControl"

Change ts file

model: string;
  modelChanged: Subject<string> = new Subject<string>();

  changed(text: string) {
      this.modelChanged.next(text);
  }
  this.modelChanged.pipe(
      .subscribe(model => this.postErrorMessage = model);

to

this.myControl.valueChanges.pipe(
      .subscribe(model => this.postErrorMessage = model);

来源：https://stackoverflow.com/questions/49918503/angular-6-warning-for-using-formcontrolname-and-ngmodel