Complete Guide to Setting Default Options in Angular Material mat-select

Introduction

In modern web development, form controls are central to user interaction. Angular Material, as a popular UI component library, offers rich form controls, with mat-select being a commonly used dropdown selector. However, many developers encounter difficulties when setting default options, especially when dealing with null values or specific initial states.

Basic Setup Method

The simplest approach to set a default option is through property binding. In the component template, use [(value)] for two-way binding, then initialize the corresponding property in the component class.

Example code:

<mat-form-field>
    <mat-select [(value)]="selected" placeholder="Mode">
        <mat-option value="domain">Domain</mat-option>
        <mat-option value="exact">Exact</mat-option>
    </mat-select>
</mat-form-field>

In the corresponding component class:

export class ExampleComponent {
    selected = 'domain';
}

This method does not rely on ngModel or reactive forms, resulting in clean and straightforward code. When the component initializes, the value of the selected property automatically binds to the mat-select, displaying the default option.

Default Setting in Reactive Forms

For scenarios using reactive forms, the default value can be set via the setValue method during component initialization. This approach is particularly suitable for dynamic data or complex object selections.

Example implementation:

export class AddressComponent implements OnInit {
    addressForm: FormGroup;
    countries = [
        { number: '826', name: 'United Kingdom' },
        { number: '840', name: 'United States' }
    ];

    constructor(private fb: FormBuilder) {
        this.addressForm = this.fb.group({
            country: [null]
        });
    }

    ngOnInit() {
        const countryDefault = this.countries.find(c => c.number === '826');
        this.addressForm.get('country').setValue(countryDefault.name);
    }
}

Corresponding template:

<mat-select formControlName="country">
    <mat-option *ngFor="let country of countries" [value]="country.name">
        {{country.name}}
    </mat-option>
</mat-select>

Null Value Handling and Common Issues

In practical development, handling null values or unselected states is often necessary. Angular Material's mat-select has some limitations in displaying null value text, which can lead to user experience issues.

Common workarounds include:

• Using empty strings as placeholder values
• Adding a dedicated "unselected" option
• Customizing display styles via CSS

For example, you can add an option representing a null value:

<mat-select [(value)]="selected">
    <mat-option value="">Please select...</mat-option>
    <mat-option value="domain">Domain</mat-option>
    <mat-option value="exact">Exact</mat-option>
</mat-select>

Best Practices Summary

Based on real-world project experience, the following best practices are recommended:

1. For simple scenarios, prioritize the property binding approach
2. In complex forms, use reactive forms for better control and validation
3. Always consider handling for null value states
4. Ensure default values are set during component initialization
5. Conduct thorough testing to ensure compatibility across different browsers and devices

By appropriately choosing implementation methods and adhering to best practices, you can ensure that the mat-select component correctly displays default options in various scenarios, providing an excellent user experience.