Setting options using the form group in dropdowns in Angular can greatly enhance the user experience

I have created a FormGroup called holidayform and set it up as follows:

 holidayform: FormGroup;

 this.holidayform = this.fb.group({
      title: ['', [Validators.required]],
      entryDate: ['',],
    })

 this.holidayform.patchValue({
      title: data.title,
      entryDate: data.entryDate,
 })

Within my component, I have a dropdown like this :

<form [formGroup]="holidayform">
 <select class="form-control"> <option value="Globals" [selected]="holidayform.title=='Globals'">Global</option>
 <option value="Locals" [selected]="holidayform.title=='Locals'">Local</option>
 </select>

The usage of

[selected]="holidayform.title=='Globals'"
is not functioning as intended. Instead, I want to select the option based on the value patched in the formgroup.

If anyone has a solution, please share. Thanks!

Answer №1

The choice is determined by the specified FormControl. Instruct Angular that the selection is linked to the title control within the holidayform using formControlName. Consequently, if data.title equals Globals during patching, the Global option will be pre-selected.

<form [formGroup]="holidayform">
  <select class="form-control" formControlName="title">
    <option value="Globals">Global</option>
    <option value="Locals">Local</option>
  </select>

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

Find the combined key names in an object where the values can be accessed by index

I am currently working on creating a function called indexByProp, which will only allow the selection of props to index by if they are strings, numbers, or symbols. This particular issue is related to https://github.com/microsoft/TypeScript/issues/33521. ...

"Refining MongoDB queries with a filter after performing a populate

I want to retrieve all records with populated attributes in a query. Here is the TypeScript code: router.get("/slice", async (req, res) => { if (req.query.first && req.query.rowcount) { const first: number = parseInt(req.qu ...

What is the significance of var-less variables in TypeScript class definitions?

Why is it that when creating a component class in Angular2, we don't need to use var when declaring a new variable? For example: @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> ` }) export class AppCo ...

"Pairing Angular's loader with RxJS combineLatest for seamless data

Hey there! Currently, I'm working on enhancing my Angular application by implementing a global loader feature. This loader should be displayed whenever data is being fetched from my API. To achieve this, I am utilizing ngrx actions such as fetchDataAc ...

Is it possible that React.createElement does not accept objects as valid react children?

I am working on a simple text component: import * as React from 'react' interface IProps { level: 't1' | 't2' | 't3', size: 's' | 'm' | 'l' | 'xl' | 'xxl', sub ...

How can you establish the default value for a form from an Observable?

Check out my TypeScript component below export interface Product{ id?:string, name:string, price:string; quantity:string; tags:Tags[]; description:string; files: File[]; } product$:Observable<Product | undefined>; ngOnIn ...

RxJs: Generating an observable based on changes in a field's value

Is there a way to generate an Observable using the variable this.pending as its source? I'm looking to create an Observable that will produce a new feed each time the value of this.pending changes. For example, if I update this.pending to be false i ...

Is your Express router failing to handle post requests properly?

I've set up my development environment using angular-cli and webpack, with the following configuration in package.json: "dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular ...

The React Native blob or file seems to be encountering trouble in reaching the server

I'm in a tough spot here. I can't figure out what's going wrong. My goal is to send a file using the expo-image-picker component to the server. The form gets sent, but the image doesn't. When I use the fetch command, I immediately get a ...

What is the rationale behind Angular's decision to use cdr.markForCheck() instead of cdr.detectChanges() in the async

Regarding Angular, I have a question: Why does the Angular async pipe use cdr.markForCheck() instead of cdr.detectChanges()? I have noticed two main differences between these two approaches: markForCheck() marks the path all the way up to the root compo ...

Encountered an issue while attempting to authenticate CMS signature using pkijs

I am attempting to validate a CMS signature generated with open ssl using the following command: $ openssl cms -sign -signer domain.pem -inkey domain.key -binary -in README.md -outform der -out signature Below is my code utilizing pkijs: import * as pkij ...

The [image link] in the NextJS image was loaded in advance using link preload, but it was not utilized within a short time after the window finished loading

While working on my blog website with NextJS, I encountered a warning in the console related to using next/image: The resource http://localhost:3000/_next/image... was preloaded using link preload but not used within a few seconds from the window's lo ...

Having trouble with npm install on an Angular project? It seems to be failing with an ECONNREFUSED error while trying to

I am facing an issue while trying to clone one of my Angular projects. To make it work, I need to run npm install, which used to work fine in the past. However, recently I encountered the following error: npm install npm ERR! code ECONNREFUSED npm ERR! ...

What is the best method for extracting the selected value from a Dropdown in ng-bootstrap?

I am currently utilizing ng-bootstrap and I am interested in obtaining the selected value from a dropdown. <div class="col text-right"> <div ngbDropdown placement="top-right" class="d-inline-block"> <button class="btn btn-outline-primary ...

steps to authenticate with dynamic database information instead of hard-coded data

After following a tutorial, I successfully created my first register login system in dot net and angular. The issue I encountered is that the author used static data in the tutorial's code example. However, I want to implement my own database data. As ...

When using TypeScript, a typed interface will not permit a value that is not within its specified string literal type

I have downsized my issue to a smaller scale. This class needs to set the default value of its "status" property. The type T extends the string literal type "PossibleStatus" which consists of 3 possible strings. Typescript is giving me trouble with this. ...

Simple steps to make an Angular Material mat-card expand to full screen

Currently, my goal is to create a portal-style page layout using Angular Material. This layout will feature a grid of cards where each card can be expanded to take up the majority of the visible page, covering all other cards that are not in focus. The car ...

New Authentication: The sign-in feature will redirect to /api/auth/error

Currently implementing Google sign-in functionality on my Next.js 13 app using Next-auth. I have utilized the signIn() function as described in the documentation here. However, upon calling the signIn() function, I am unexpectedly redirected to http://loca ...

The search button in the ngx-pagination StartDate and EndDate Search Filter is unresponsive

Working with Angular-14 and ASP.Net Core-6 Web API to consume an endpoint and handle JSON responses. An example of the endpoint URL without parameters: https://localhost/MyApp/api/v1/all-merchants And when parameters are included: https://localhost/MyApp ...

The alias for the computed column is not correctly connected to the TypeORM Entity

I am currently working on extracting data from a table in a MySQL database using TypeORM for my Express.js project. In order to retrieve the data, I am utilizing the QueryBuilder. This is the implementation I have: const result = await this.repository.cr ...