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:

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:

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!