What is the best way to retrieve the value and text from a mat-select element in Angular without causing the MatSelectChange event

Question

What is the best way to retrieve the value and text from a mat-select element in Angular without causing the MatSelectChange event

In my HTML code, I have the following:

<mat-select placeholder="Job Category" formControlName="job_category" 
  (selectionChange)="selectedJobType($event)">
              <mat-option *ngFor="let job of jobTypes" [value]="job.jobid">
                {{ job.jobname }}
              </mat-option>
            </mat-select>

In my TypeScript file, I have defined a FormBuilder group for job category as such:

 jobRegisterForm = this.fb.group({
  job_category: [null, Validators.required]});

Inside the ngOnInit() function, I am setting the value using an ID like so:

this.jobRegisterForm.get('job_category').setValue(this.jobData.jobcategoryid);

After this, the value is displayed correctly in the dropdown. If the user changes the dropdown value, I can capture that information with the following TypeScript code:

selectedJobType(event: MatSelectChange) {
    this.selectedMatJob = {
  value: event.value,
  text: event.source.triggerValue
   };
  }

However, if the user does not change the dropdown value and clicks on save, how do I retrieve the selected text and value for 'job_category'?

angular typescript angular-material

Answer 1

Answer №1

If you wish to receive updates on value changes, you can subscribe to valueChanges.

// Once the form is created
this.jobRegisterForm.get('job_category').valueChanges.subscribe(res => {
    this.selectedMatJob = {
        value: res,
        text: this.jobType.find(j => j.jobid == res).jobname
    };
})
// Set initial value
this.jobRegisterForm.get('job_category').setValue(this.jobData.jobcategoryid);

Alternatively, you can set the job as the "value" itself

<mat-option *ngFor="let job of jobTypes" [ngValue]="job">

In this case, you will need to use compareWith,

<mat-select [formControl]="job_category" required [compareWith]="compare">
   ....
</mat-select>

In your .ts file

compare = (a: any, b: any) => a.jobid == b.jobid // Function declaration
// When setting a value, for example:
const job = this.jobTypes.find(j => jobid == this.jobData.jobcategoryid)
this.jobRegisterForm.get('job_category').setValue(job)

Yes, a FormControl has the capability to store an object

NOTE: It is recommended to have a compareWith function when assigning values directly from objects in jobTypes using "find". However, with compareWith, you have more flexibility such as:

this.jobRegisterForm.get('job_category').setValue(
  {jobid: 1, jobname: 'my first work'}
)

Moreover, it may not be necessary to fetch the value upon every change; you could simply add the category during submission. But keep in mind that this is just a suggestion.

Answer 2

If you wish to receive updates on value changes, you can subscribe to valueChanges.

// Once the form is created
this.jobRegisterForm.get('job_category').valueChanges.subscribe(res => {
    this.selectedMatJob = {
        value: res,
        text: this.jobType.find(j => j.jobid == res).jobname
    };
})
// Set initial value
this.jobRegisterForm.get('job_category').setValue(this.jobData.jobcategoryid);

Alternatively, you can set the job as the "value" itself

<mat-option *ngFor="let job of jobTypes" [ngValue]="job">

In this case, you will need to use compareWith,

<mat-select [formControl]="job_category" required [compareWith]="compare">
   ....
</mat-select>

In your .ts file

compare = (a: any, b: any) => a.jobid == b.jobid // Function declaration
// When setting a value, for example:
const job = this.jobTypes.find(j => jobid == this.jobData.jobcategoryid)
this.jobRegisterForm.get('job_category').setValue(job)

Yes, a FormControl has the capability to store an object

NOTE: It is recommended to have a compareWith function when assigning values directly from objects in jobTypes using "find". However, with compareWith, you have more flexibility such as:

this.jobRegisterForm.get('job_category').setValue(
  {jobid: 1, jobname: 'my first work'}
)

Moreover, it may not be necessary to fetch the value upon every change; you could simply add the category during submission. But keep in mind that this is just a suggestion.

What is the best way to retrieve the value and text from a mat-select element in Angular without causing the MatSelectChange event

Answer №1

Similar questions

Resetting Form Status in Angular 4

Struggling with loading partials in Sails.JS from the "assets" directory?

Commitments shatter amidst constructing a website

Guide on incorporating finos/perspective into an Angular 8 project using https://perspective.finos.org/

Examining form functionalities: angular2 form testing

Cross-Origin Resource Sharing (CORS) communication between an Angular application and an ASP.NET Core API running on a local

What is the best way to selectively pass certain values to the args object?

When using the "import" statement, all modules are automatically assigned types, unlike require(), which does not provide types

How does Typescript handle dependency injection compared to the JSDoc typedef module import for defining types?

Validation of required property in the submit function is not functioning in a template-driven form that has a dropdown menu

What are the steps for utilizing Temporal as a datatype?

Obtain headers from an Excel file uploaded using the XLSX format in Angular

The error message "Element is not defined (Object.<anonymous>)" is occurring in the context of Intro.js-react, React, Next.js, and Tailwind

Why is the navbar toggle malfunctioning despite having all necessary dependencies in Angular?

The closeOnClickOutside feature seems to be malfunctioning in the angular-2-dropdown-multiselect plugin

Creating a TypeScript class to extend the JavaScript object prototype

Unable to proceed with npm install due to absence of a package.json file in the directory

Angular feature: Utilizing the @Output decorator for subscribing to EventEmitter

Error: The field 'password' is not found in the specified type

Generating a log file within an Angular 2 application