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.

Answer 1

Now you can find the documentation here:

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

So you have 3 options:

1. use Reactive forms

2. use Template driven forms

3. silence warning (not recommended)

<!-- language: lang-ts -->

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

Answer 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

Answer 3

add

[ngModelOptions]="{standalone: true}" 

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

Answer 4

So I stumbled upon this when trying to display users' avatars in mat-select:

<mat-form-field [formGroup]="assignedToFormGroup">
<mat-select placeholder="Assign to" [(ngModel)]="assignedTo" formControlName="assignTo">
  <mat-select-trigger>
    <img style="vertical-align:middle;" aria-hidden
      src="{{assignedToFormGroup.controls['assignTo'].value.photoUrl}}" height="20" />
    <span>@{{assignedToFormGroup.controls['assignTo'].value.userName}}</span>
  </mat-select-trigger>
  <!-- {{user.userName}} -->
  <mat-option *ngFor="let user of members" [value]="user">
    <img style="vertical-align:middle;" aria-hidden src="{{user.photoUrl}}" height="20" />
    <span>@{{user.userName}}</span>
  </mat-option>
</mat-select>

In controller, the formGroup was defined this way:

public assignedToFormGroup: FormGroup;

I followed Sohail's advice and removed [(ngModel)] from my HTML code:

<mat-form-field [formGroup]="assignedToFormGroup">
<mat-select placeholder="Assign to" formControlName="assignTo">
  <mat-select-trigger>
    <img style="vertical-align:middle;" aria-hidden
      src="{{assignedToFormGroup.controls['assignTo'].value.photoUrl}}" height="20" />
    <span>@{{assignedToFormGroup.controls['assignTo'].value.userName}}</span>
  </mat-select-trigger>
  <!-- {{user.userName}} -->
  <mat-option *ngFor="let user of members" [value]="user">
    <img style="vertical-align:middle;" aria-hidden src="{{user.photoUrl}}" height="20" />
    <span>@{{user.userName}}</span>
  </mat-option>
</mat-select>

That gave me errors when opening page - I tried to load photoUrl and userName from null, because by removing [(ngModel)] I also removed default selection in mat-select.

So I modified my controller to do the following: 1. Constructor:

this.assignedToFormGroup.controls['assignTo'].setValue({photoUrl: '', userName: ''});

2. Button action where I save my form - added following line:

   let assignedTo = this.assignedToFormGroup.controls['assignTo'].value;

That actually worked. Now I'm setting default selection on page load and read selected value when submitting the form. I'm aware that it's not the best and prettiest solution, but I thought I'll share it - might be a good starting point for better solution.

Answer 5

I had the same warning when I use [(ngMode)] together with [formControlName] in an embedded custom control. My form is built dynamicly using formBuilder.array([]) and I have to stay with [formControlName]:

this.searchForm = this.formBuilder.group({
      dynamicFormArray: this.formBuilder.array([])
});

But after I removed [(ngMode)] which is two-way bounding, I can no longer get the user input value from the embedded custom control using form.value (though I can see the value inside the embedded control)!

After painful strugging for some time, I've finally found a solution to make the user input value from the embedded contorl available to form.value. The key is to use patchValue for the dyanmicFormArray (not the form itself or formBuilder.group!):

this.dynamicFormArray.patchValue([{name: this.value}]);

Hope this could help some friends with similar issue.

Answer 6

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