How to Capture Object Values from mat-select in Angular and Set them in Reactive Forms

Описание: Learn how to effectively capture an object value selected in mat-select in Angular and dynamically set it into a reactive form using simple yet effective techniques.
---
This video is based on the question https://stackoverflow.com/q/72623500/ asked by the user 'Ozzott' ( https://stackoverflow.com/u/12136766/ ) and on the answer https://stackoverflow.com/a/72623915/ provided by the user 'Paul GR' ( https://stackoverflow.com/u/10394155/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to take an object value by Its ID selected in mat-select and set the object values into a reactive form?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Capture Object Values from mat-select in Angular and Set Them in Reactive Forms

If you are building an Angular application that requires users to select an item from a dropdown menu—like a list of accounts—you might find yourself needing to capture multiple pieces of information about that item. Using Angular Material’s mat-select along with reactive forms can streamline this process, but it may not be immediately clear how to achieve it. In this post, we'll walk through a simple, effective solution to extract object values from a mat-select dropdown and assign them to a reactive form.

The Problem: Extracting Multiple Values

You have a mat-select containing a list of mat-option. Each option displays information about an account, such as account number, agency number, and digit number. However, you need to set these values into separate fields of a reactive form. The fundamental challenge here is capturing multiple values from a single selection in a way that maintains reactivity.

Example of mat-select

Here’s a brief look at how your mat-select might be structured:

[[See Video to Reveal this Text or Code Snippet]]

While this setup displays the account information neatly, it doesn’t quite facilitate setting the values into your form directly.

The Solution: Using (click) to Capture Values

To tackle this problem, we’ll leverage the (click) event on your mat-option elements. We can create a function in our component that will be triggered when a user clicks on a specific option.

Implementation Steps

Add the (click) event to mat-option: You'll want to modify your mat-option like this:

[[See Video to Reveal this Text or Code Snippet]]

Define the Function: In your component, define yourFunction to handle the selected account. This function will allow us to capture the account object.

[[See Video to Reveal this Text or Code Snippet]]

Reactive Form Setup

Here’s a quick example of how to set up the reactive form to include the new fields:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By using the (click) event handler in Angular's mat-select, you can efficiently extract object values and set them into a reactive form. This allows you to dynamically capture and manage multiple pieces of data from a single selection, maintaining the integrity and reactivity of your Angular application.

Feel free to adapt the code provided to fit your application’s specific needs. Happy coding!