CODEWITHSUNDEEP
angularangular-ngmodelangular-reactive-forms
Akshay
Akshay

Reputation: 3866

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.

Upvotes: 64

Views: 149447

Answers (7)

Paktwis Homayun
Paktwis Homayun

Reputation: 330

Changing (ngModelChange) to (input) resolved the deprecation warning for me. This works with <input>, <select> or <textarea> Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event

Upvotes: 0

Sohail Anwar
Sohail Anwar

Reputation: 450

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. And get value as

this.form.get('first').value

Another approach to achieve functionality is more simple.

this.form.controls.first.setValue('some Value');

And get value using form group as

this.holidaysForm.value.first;

Upvotes: 33

David W
David W

Reputation: 49

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.

Upvotes: 0

yurzui
yurzui

Reputation: 214007

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

Upvotes: 57

greenskin
greenskin

Reputation: 554

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: ''});

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

Upvotes: 0

Ahmet Arslan
Ahmet Arslan

Reputation: 6110

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

Upvotes: -2

Olalekan J Makanjuola
Olalekan J Makanjuola

Reputation: 91

add

[ngModelOptions]="{standalone: true}"

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

Upvotes: 5

Related Questions