Set Default Value in Select Dropdown in Angular Reactive Form

To set a default value in a select dropdown in Angular’s reactive form, you can call the setValue() method on the dropdown’s form control and pass the default value as a parameter to it.

For example, let’s say we have a select dropdown that shows the list of countries a user can select from it.

We want to make ‘United States’ as the default country for the select dropdown.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  userForm: FormGroup;
  defaultCountry: string = 'USA';  // Default country

  countries: any[] = [
    { name: 'Australia', value: 'Australia' },
    { name: 'Canada', value: 'Canada' },
    { name: 'United States', value: 'USA' },
    { name: 'India', value: 'India' },
    { name: 'China', value: 'China' },
  ]

  constructor(private fb: FormBuilder) {

    this.userForm = this.fb.group({
      userName: ['', Validators.required],
      country: ['', Validators.required],
    });

  }

  ngOnInit(): void {

    // Set default country as 'USA'
    this.userForm.get('country')?.setValue(this.defaultCountry);
  }

  submit() {
    // Add your stuff
  }

}

Here is the template:

<div class="container">

  <form [formGroup]="userForm">
    <div>
      <input type="text" formControlName="userName" placeholder="Type here">
      <label> Name</label>
    </div>
    <div>
      <select formControlName="country">
        <option value="" selected disabled>Select a Country</option>
        <option *ngFor="let country of countries" [value]="country.value">{{country.name}}</option>
      </select>
      <label> Select Country</label>
    </div>

    <button type="submit" (click)="submit()">Submit</button>

  </form>

</div>

Output:

Set Default Value in Select Dropdown in Angular Reactive Form

Using the patchValue() Method to Set the Default Value

Alternatively, you can also use the patchValue() method to set the default value of the select dropdown.

You need to call the patchValue() method on the form group itself and then pass the default value of the dropdown as a key-value pair. Here, the key will be the form control name and the value will be the default value you want to set.

The following example set “USA” as default country:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  userForm: FormGroup;
  defaultCountry: string = 'USA';  // Default country

  countries: any[] = [
    { name: 'Australia', value: 'Australia' },
    { name: 'Canada', value: 'Canada' },
    { name: 'United States', value: 'USA' },
    { name: 'India', value: 'India' },
    { name: 'China', value: 'China' },
  ]

  constructor(private fb: FormBuilder) {

    this.userForm = this.fb.group({
      userName: ['', Validators.required],
      country: ['', Validators.required],
    });

  }

  ngOnInit(): void {

    // Set default country as 'USA'
    this.userForm.patchValue({
      country: this.defaultCountry
    });
    
  }

  submit() {
    // Add your stuff
  }

}

And here is the template file:

<div class="container">

  <form [formGroup]="userForm">
    <div>
      <input type="text" formControlName="userName" placeholder="Type here">
      <label> Name</label>
    </div>
    <div>
      <select formControlName="country">
        <option value="" selected disabled>Select a Country</option>
        <option *ngFor="let country of countries" [value]="country.value">{{country.name}}</option>
      </select>
      <label> Select Country</label>
    </div>

    <button type="submit" (click)="submit()">Submit</button>

  </form>

</div>

Output:

Set the default value of the select dropdown with patchValue() method in Angular

You can use the patchValue() and setValue() methods to set the value of any form control or form group you want.

If you want to know the difference between setValue() and patchValue() read difference between setValue() and patchValue() methods in Angular.

That’s all for this article. Thanks for reading!

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.