I'm having trouble displaying the saved percentage value in an angular material mat select component

When I use the mat-form-field and mat-option to list numbers 1-100, the saved value is not displaying in the dropdown after saving.

<mat-form-field class="full-wid" appearance="outline">
                  <mat-label>Percentage 1 (%)</mat-label>
                  <mat-select matTooltip="Please percentage" class="numbers" [required]="percentTorF"
                    (selectionChange)="selected2()" [formControl]="salaryform.controls['Percentage1']"
                    [(ngModel)]="percentValue1">
                    <mat-option *ngFor="let n1 of numbers1" [value]="n1">{{ n1 }}</mat-option>
                  </mat-select>
                  <mat-error *ngIf="salaryform.controls['Percentage1'].hasError('required')">
                    Percentage is required</mat-error>
</mat-form-field>

https://i.sstatic.net/zQOs1.png** https://i.sstatic.net/soQ2H.png

angulartypescriptangular-material

Answer №1

Changing a percentage integer into a string can be done by utilizing the toString() method prior to populating form fields.

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

Is it necessary to create a wrapper for Angular Material2 components?

I have multiple angular 5 projects in progress and my team is considering incorporating material design components from https://material.angular.io/. Would it be beneficial to create a wrapper layer to contain the material design components? This would me ...

angulartypescriptangular-material2

Guidelines for declaring types in variable definitions in Typescript

In Typescript, you have multiple options to define a boolean variable such as: let a = true; let b: boolean = true; Given that true is already a boolean value, is it still typical to explicitly declare the variable type (like shown for b)? If yes, does ...

typescript

Using optional chaining with TypeScript types

I'm dealing with a complex data structure that is deeply nested, and I need to reference a type within it. The issue is that this type doesn't have its own unique name or definition. Here's an example: MyQuery['system']['error ...

typescriptoptional-chainingnested-types

Using Typescript Classes in a NodeJS Environment

Trying to work with Data Classes in NodeJs that were defined in Typescript has led me to question if there is a simpler approach. Previously, in JavaScript, I could easily create an instance of a class like this: let myBuilding = new Building And then a ...

node.jstypescript

Waiting for completion of two observables in RxJS/Angular 11 while also managing errors

Currently, I am facing the challenge of waiting for two requests to complete (observables) and performing certain actions. Here is what I need: Wait for both requests (observables) to finish If one of them fails - show one error message If both of them f ...

angularrxjsrxjs-observables

Using NestJS to pass request and response parameters

I have a function in my services set up like this: ` @Injectable() export class AppService { getVerifyToken(req: Request, res: Response) { try { let accessToken = process.env.ACCES_TOKEN_FB; let token = req.query["hub.verify_t ...

node.jstypescriptnestjs

Struggling to execute a simple hello_world.ts script following a recent TypeScript installation on WSL

I've recently ventured into the realm of Typescript and decided to kick things off by following the official 5-minute tutorial available at: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html npm install -g typescript However, ...

node.jstypescriptnpmwindows-subsystem-for-linux

Tips for integrating Typescript into a pre-existing Vue 3 project

The contents of my package.json file are as follows: { "name": "view", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve" ...

typescriptvue.jsvuejs3vue-cli

Error message encountered in Next.js when trying to import 'SWRConfig' from 'swr': ClerkProvider Error. The import is not successful as 'SWRConfig' is not exported from 'swr

I recently started working on a new Next.js project and integrated Clerk into it. I set up the env.local and middleware.ts files before wrapping the HTML div with ClerkProvider. However, when attempting to run the project locally, I encountered the followi ...

typescriptnext.jsclerk

Guide to showcasing a stomp client's message in the view without having to refresh the page when a new message is delivered

I'm in the process of setting up a chatroom with Angular and web-socket. I want to update the view with new messages from the socket without having to refresh the page. The message is appearing in the log console but not on the page. Any suggestions w ...

angularwebsocketstomp

ngFor failing to properly update when new data is pushed

I am currently working on creating an array of reactive forms in Angular. Here is what I have set up: typesForms: FormGroup[] = []; In my HTML, I loop through this array like so: <form *ngFor="let type of typesForms; let i = index" [formGroup]="types ...

angularngforangular-reactive-forms

"Uploading user profile images with Angular, Express, Multer, and Mongoose made easy

Hey there, I'm currently using multer to upload images. When I select an image, it gets saved in the backend folder called uploads. However, I would like to store it in a MongoDB database and then display that image on the frontend using Angular. I&ap ...

angularmongodbexpress

When a radio button is clicked in Angular7 and it shares the same form control name, both radio buttons are being

Visit this StackBlitz link for more information. places = ['effil tower','new discover'] new FormGroup({place: new FormControl()}); <div *ngIf="places?.length > 0" class="col-12"> <div style=" padding-top: 1e ...

javascripthtmlangularselectradio-button

The ambiguity surrounding the timing of decorator invocation in TypeScript

My understanding was that decorators in TypeScript are invoked after the constructor of a class. However, I recently learned otherwise. For example, the primary response on this thread suggests that Decorators are called when the class is declared—not wh ...

javascriptangulartypescriptdecorator

The function ValueChange remains uninvoked

Query: The issue is that valueChanges is only triggered for the entire form and not for specific controllers. Although this approach works, it returns the complete object. public ngOnInit(): void { this.form.createWagonBodyForm(); ...

angulartypescriptvaluechangelistener

Having trouble executing the project using Gulp

I'm a beginner in front-end development and I am working on an existing project that I'm having trouble running. According to the documentation, I should run the project by executing: $ gulp && gulp serve But I keep getting this error: ...

node.jstypescriptnpmgulp

What causes the Angular router URL to vary from the document location on reload while employing CanActivate?

My Angular 2 router setup seems to be causing some issues. When I refresh the page, I've noticed that the router object's URL value is different from the location.hash property of the document. For example, when I check router.url, I get "/", bu ...

angularangular2-routing

Issue with Angular's ngOnChanges Lifecycle Hook Preventing Function ExecutionWhen attempting to run a function within Angular's ngOn

In the midst of my evaluation process to ensure that specific values are properly transmitted from one component to another using Angular's custom Output() and EventEmitter(), I am encountering some issues. These values are being sent from the view of ...

javascriptangularlifecycleeventemitter

Issue with rest operator behavior in TypeScript when targeting es2018

This specific code snippet functions properly in the TypeScript Playground... class Foo { constructor(...args: any[]) { } static make(...args: any[]): Foo { return new Foo(...args); } } Example However, when trying to incorpora ...

typescript

Enhance Bootstrap dropdown functionality in Angular 8

Currently, my project has numerous Bootstrap dropdowns which rely on jQuery. I am exploring the possibility of removing both jQuery and Bootstrap from my project. Can Angular Material dropdowns serve as a suitable replacement for Bootstrap dropdowns? Alt ...

angularbootstrap-4angular-material