3

I have a Reactive Form. I have an Input with Mat-Select, where the User must pick an option from a List of countries. Each country is an Object with name, capital and population properties.

When the country is picked, the Object is stored as SelectedCountry, and other Inputs (Capital input and population input) in the same Form must be automatically filled.

I can do it easily with NgModel, like this:

<mat-form-field appearance="outline">
        <mat-label>Country Capital</mat-label>
        <input formControlName="country_capital" matInput placeholder="Country capital" [(ngModel)]="selectedCountry.capital">
    </mat-form-field>

So the Input result is, for example if you pick US, "Washington".

But Angular shows this 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 a future version of Angular.

My question is, what is the correct and current way of doing the same thing without ngModel?

FrankS94
  • 79
  • 8

1 Answers1

3

If you're using reactive forms you make use of methods available for your initialized form. In this case, what you need is probably patchValue or setValue.

If you use template forms you make use of ngModel.

Link to angular docs

Adrian Sawicki
  • 590
  • 5
  • 22