Fill Input Value according to Selected Option in Angular Reactive Forms

Question

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?

You need [ngModelOptions]="{standalone:true}" along with your [(ngModel)] directive, to use it inside a reactive form. — Rohith Balaji
– Rohith Balaji, Commented Jun 30, 2022 at 10:13

Adrian Sawicki · Accepted Answer · 2022-07-05 13:37:51Z

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

edited Jul 5, 2022 at 13:37

answered Feb 21, 2022 at 1:18

Adrian Sawicki

7086 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fill Input Value according to Selected Option in Angular Reactive Forms

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related