The fillFormValues function is not functioning properly within the mat-select element

I need help filling a form value by id.

This function successfully retrieves the value:

  fillFormValues(expenseCategory: ExpenseCategory): void {
    console.log('response', expenseCategory.parent_category)
    this.aa= expenseCategory.parent_category;
    console.log(this.aa.name)
    this.expenseCategoriesEditForm.get('parent_category')?.setValue(this.aa.name); //it doesn't function
    this.expenseCategoriesEditForm.get('name')?.setValue(expenseCategory.name); // function ok
  }

In my HTML file, I have the following code:

 <mat-select formControlName="parent_category" id="parent_category">
                      <mat-option *ngFor="let p_g of expenseCategories" [value]="p_g.id">
                        {{p_g.name}}
                      </mat-option>
  </mat-select>

I want to show in the view

this.expenseCategoriesEditForm.get('parent_category')?.setValue(this.aa.name); //it doesn't function

Any ideas or suggestions would be greatly appreciated. Thank you!

Answer №1

It seems that you are attempting to assign the value "name" in this section:

this.expenseCategoriesEditForm.get('parent_category')?.setValue(this.aa.name);

However, it is recommended to use the id instead of the name of the "aa" object. Therefore, the correct code should look like this:

this.expenseCategoriesEditForm.get('parent_category')?.setValue(this.aa.id);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ionic 4 ion-button unable to reflect changes in ngStyle when Variable value is modified

In my Ionic 4 project, I have a page where clicking on a button changes a variable value and updates the ngStyle. There are two buttons, "Friends" and "Families", each meant to have a different background color when selected. Initially, the Friends butto ...

Unable to load the .js file within the Angular module

I am facing an issue with my Angular sidebar component that is trying to load a local script called sidebar.js. I have the following code in src\app\sidebar\sidebar.component.ts: ngAfterViewInit(): void { const s = document.createEleme ...

Obtain redirected JSON data locally using Angular 5

Currently, I am working on retrieving JSON data which will be sent to my localhost through a POST method. The SpringBoot API controller will validate the JSON content before forwarding it to my localhost. My task is to intercept this JSON data when it is t ...

Implementing debounceTime in Angular can be done by using the debounceTime operator

I am currently working on implementing the debounceTime functionality in an autocomplete feature. My goal is to use debounceTime to minimize the number of server calls. After researching, I found 3 possible solutions which I have included snippets of belo ...

Save the chosen information into the database

My goal is to insert a Foreign key, acc_id, into the patient_info table from the account_info table. I have successfully retrieved the data from my database and now I want to use it as a Foreign key in another table. Here is the code snippet: try { $ ...

The comparison between client-side and server-side programming logic

Looking for guidance in website development as I am unsure of where to place my logic. Let's consider a scenario: when a user selects filters, such as price range or home type on a real estate website like Zillow, the list of houses gets updated accor ...

I'm encountering an issue with my array in JavaScript while using // @ts-check in VS Code. Why am I receiving an error stating that property 'find' does not exist on my array? (typescript 2.7

** update console.log(Array.isArray(primaryNumberFemales)); // true and I export it with: export { primaryNumberFemales, }; ** end update I possess an array (which is indeed a type of object) that is structured in the following manner: const primar ...

React's .map is not compatible with arrays of objects

I want to retrieve all products from my API. Here is the code snippet for fetching products from the API. The following code snippet is functioning properly: const heh = () => { products.map((p) => console.log(p.id)) } The issue ari ...

Ensuring that environment variables are properly set is essential for effective error handling

I am currently integrating my NodeJS and Typescript App to create new config files that utilize .env variables. If a specific variable is not set, I want to trigger an error. After setting up my config file, I encountered some errors; however, I am unsure ...

Having trouble with Visual Studio 2015 not compiling TypeScript within an ASP.NET Core project?

Seeking assistance with my Angular app development setup in VS2015. Even though it is recognized as a TypeScript Virtual Project, I am facing issues getting the transpiled files into the wwwroot folder within my ASP.NET Core project. Here's an overvie ...

The access to the HTTP response object is not possible: the property is not found on the Object type

I recently created a response object and assigned it to the "this" object. However, when I try to access the datacentersinfo property, I encounter an error stating that the property does not exist on type Object. Due to this issue, I am unable to generat ...

Creating a mapping for a dynamic array of generic types while preserving the connection between their values

In my code, I have a factory function that generates a custom on() event listener tailored to specific event types allowed for user listening. These events are defined with types, each containing an eventName and data (which is the emitted event data). My ...

Retrieving variables from JavaScript files in TypeScript

Greetings, I am in the process of upgrading an existing Angular application from version 2 to 9. My approach involves first moving it to angular 4 and then continuing with the upgrades. I have successfully updated the necessary packages, but now I'm e ...

Differences between Typescript, Tsc, and Ntypescript

It all began when the command tsc --init refused to work... I'm curious, what sets apart these three commands: npm install -g typescript npm install -g tsc npm install -g ntsc Initially, I assumed "tsc" was just an abbreviation for typescript, but ...

Troubleshooting d3js Type Errors in Angular (Updated Version)

Encountering numerous type errors with d3js when integrating it into Angular (typescript). svg.call(d3.zoom().on('zoom', () => { g.attr('transform', d3.events.transform); })); Error thrown: S2345: Argument of type 'Zo ...

Having trouble executing a method from a template in Angular 5?

Angular has a useful capability that almost every developer has utilized at some point: calling methods from templates. I've personally been using this feature for months without any issues. However, recently I encountered a problem. I have a menu co ...

What are the steps to display 10 items sequentially with the angular2-infinite-scroll package?

I'm currently working with the angular 2 infinite scroll module and I need to display 10 elements at a time. When the user scrolls down, the next 10 elements should be shown and the scrollbar should adjust accordingly. I've tried several methods ...

The scroll animation feature was not functioning properly in Next.js, however, it was working flawlessly in create react app

I recently transitioned a small project from Create React App (CRA) to Next.js. Everything is working as expected except for the scroll animations in Next.js, which are not functioning properly. There are no errors thrown; the animations simply do not occ ...

Utilizing sourcemaps in ionic for seamless linking

I've encountered an issue with source maps or a similar feature. After inserting console.log(...) in my code, the message appears in the console but links to the compiled JavaScript file instead of the original TypeScript file. Have I overlooked som ...

Ways to merge values across multiple arrays

There is a method to retrieve all unique properties from an array, demonstrated by the following code: var people = [{ "name": "John", "age": 30 }, { "name": "Anna", "job": true }, { "name": "Peter", "age": 35 }]; var result = []; people. ...