What is the best way to show a warning message when a combo box is selected?

Question

What is the best way to show a warning message when a combo box is selected?

I currently have a combo box that allows users to search for existing options by typing inside the box. I want to enhance this functionality by adding a warning whenever a user enters words that do not match any of the options available in the combo box. Below is the code snippet I am working with:

<mat-form-field appearance="outline" class="width-1">
                <mat-label>Aircraft Type (ICAO)</mat-label>
                <!-- test autocomplete aircraft type -->
                <input
                  type="text"
                  placeholder="Aircraft Type (ICAO)"
                  aria-label="Aircraft Type (ICAO)"
                  matInput
                  formControlName="aircraftType"
                  [matAutocomplete]="type"
                  (input)="onAircraftTypeChange()"
                />
                <mat-autocomplete
                  #type="matAutocomplete"
                  (optionSelected)="onSelectAircraftType($event.option.value)"
                  [displayWith]="displayAircraftTypeFn"
                >
                  <mat-option
                    *ngFor="let type of filteredAircraftTypes | async"
                    [value]="type"
                  >
                    {{ type.label }}
                  </mat-option>
                </mat-autocomplete>
                <!-- end test autocomplete -->
              </mat-form-field>

https://i.sstatic.net/Kaqp6.png

I aim to display the warning message above the form field.

angular typescript search combobox warnings

Answer 1

Answer №1

To display a warning message, use the following code snippet:

<div class="warning-container">
    <mat-form-field appearance="outline">
        <mat-label>Please enter your username</mat-label>
        <input matInput placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4824263306322f363d31382b603d3133">[email protected]</a>" [formControl]="username" required>
        <mat-error *ngIf="username.invalid">{{showErrorMessage()}}</mat-error>
    </mat-form-field>
</div>

Remember to include <mat-error> within <mat-form-field>

Answer 2

To display a warning message, use the following code snippet:

<div class="warning-container">
    <mat-form-field appearance="outline">
        <mat-label>Please enter your username</mat-label>
        <input matInput placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4824263306322f363d31382b603d3133">[email protected]</a>" [formControl]="username" required>
        <mat-error *ngIf="username.invalid">{{showErrorMessage()}}</mat-error>
    </mat-form-field>
</div>

Remember to include <mat-error> within <mat-form-field>

Answer 3

Answer №2

It is not recommended to display a warning or error message above the form field as it may surprise the user and go against the Principle of least surprise.

Instead, if the user enters text that does not match any options, the <mat-autocomplete> dropdown will not show any options. Therefore, displaying the <mat-error> below the <matInput> element is acceptable.

.component.html

<mat-form-field appearance="outline" class="width-1">

    <mat-label>Aircraft Type (ICAO)</mat-label>
    <!-- test autocomplete aircraft type -->
    <input
      type="text"
      placeholder="Aircraft Type (ICAO)"
      aria-label="Aircraft Type (ICAO)"
      matInput
      formControlName="aircraftType"
      [matAutocomplete]="type"
      (input)="onAircraftTypeChange()"
    />
    <mat-autocomplete #type="matAutocomplete" (optionSelected)="onSelectAircraftType($event.option.value)"
      [displayWith]="displayAircraftTypeFn">
      <mat-option *ngFor="let type of filteredAircraftTypes | async" [value]="type">
        {{ type.label }}
      </mat-option>
    </mat-autocomplete>
    <!-- end test autocomplete -->

    <mat-error *ngIf="f.aircraftType.errors">
      <mat-error *ngIf="f.aircraftType.errors['notFound']">Not found!</mat-error>
    </mat-error>

</mat-form-field>

Utilize the built-in valueChanges Observable for the airCraftType control:

startWith - Set initial value to an empty string.
mergeMap - Filter options based on entered text.
tap - Execute the setError task for the airCraftType control if step 2 results in an empty array. If not, clear the error.

.component.ts

import { mergeMap, map, Observable, of, startWith, tap } from 'rxjs';

ngOnInit() {
  ...

  this.filteredAircraftTypes = this.form.controls[
      'aircraftType'
    ].valueChanges.pipe(
      startWith(''),
      mergeMap(value => this._filter(value)),
      tap(filterOptions => {
        this.form.controls['aircraftType'].markAsTouched();
        this.form.controls['aircraftType'].markAsDirty();

        if (filterOptions.length == 0) {
          this.form.controls['aircraftType'].setErrors({ notFound: true });
        } else {
          this.form.controls['aircraftType'].setErrors(null);
        }
      })
    );
}

private _filter(value: string): Observable<IAirCraft[]> {
    const filterValue = value.toLowerCase();

    return this.aircraftTypes.pipe(
      map(options =>
        options.filter(option =>
          option.label.toLowerCase().includes(filterValue)
        )
      )
    );
}

Check out the Sample Demo on StackBlitz

References

Learn about Adding a custom filter for Autocomplete in Angular Material

Find more information on the startWith operator in RxJS

Answer 4

It is not recommended to display a warning or error message above the form field as it may surprise the user and go against the Principle of least surprise.

Instead, if the user enters text that does not match any options, the <mat-autocomplete> dropdown will not show any options. Therefore, displaying the <mat-error> below the <matInput> element is acceptable.

.component.html

<mat-form-field appearance="outline" class="width-1">

    <mat-label>Aircraft Type (ICAO)</mat-label>
    <!-- test autocomplete aircraft type -->
    <input
      type="text"
      placeholder="Aircraft Type (ICAO)"
      aria-label="Aircraft Type (ICAO)"
      matInput
      formControlName="aircraftType"
      [matAutocomplete]="type"
      (input)="onAircraftTypeChange()"
    />
    <mat-autocomplete #type="matAutocomplete" (optionSelected)="onSelectAircraftType($event.option.value)"
      [displayWith]="displayAircraftTypeFn">
      <mat-option *ngFor="let type of filteredAircraftTypes | async" [value]="type">
        {{ type.label }}
      </mat-option>
    </mat-autocomplete>
    <!-- end test autocomplete -->

    <mat-error *ngIf="f.aircraftType.errors">
      <mat-error *ngIf="f.aircraftType.errors['notFound']">Not found!</mat-error>
    </mat-error>

</mat-form-field>

Utilize the built-in valueChanges Observable for the airCraftType control:

startWith - Set initial value to an empty string.
mergeMap - Filter options based on entered text.
tap - Execute the setError task for the airCraftType control if step 2 results in an empty array. If not, clear the error.

.component.ts

import { mergeMap, map, Observable, of, startWith, tap } from 'rxjs';

ngOnInit() {
  ...

  this.filteredAircraftTypes = this.form.controls[
      'aircraftType'
    ].valueChanges.pipe(
      startWith(''),
      mergeMap(value => this._filter(value)),
      tap(filterOptions => {
        this.form.controls['aircraftType'].markAsTouched();
        this.form.controls['aircraftType'].markAsDirty();

        if (filterOptions.length == 0) {
          this.form.controls['aircraftType'].setErrors({ notFound: true });
        } else {
          this.form.controls['aircraftType'].setErrors(null);
        }
      })
    );
}

private _filter(value: string): Observable<IAirCraft[]> {
    const filterValue = value.toLowerCase();

    return this.aircraftTypes.pipe(
      map(options =>
        options.filter(option =>
          option.label.toLowerCase().includes(filterValue)
        )
      )
    );
}

Check out the Sample Demo on StackBlitz

References

Learn about Adding a custom filter for Autocomplete in Angular Material

Find more information on the startWith operator in RxJS

Answer 5

Answer №3

Display a message above the form field only when the filteredList array is empty.

Answer 6

Display a message above the form field only when the filteredList array is empty.

What is the best way to show a warning message when a combo box is selected?

Answer №1

Answer №2

References

Answer №3

Similar questions

Undefined 'require' error in Angular 2.0

How can I programmatically define the earliest and latest selectable dates in a date picker within Angular 4?

Unable to locate the reference to 'Handlebars' in the code

There was a TypeError encountered in angular-highcharts, stating that it is not possible to read the property '0' of an undefined

Issue with Angular 5 EventEmitter causing child to parent component emission to result in undefined output

Is it possible for me to modify the Date type properties within the get method?

having difficulties connecting the paginator with MatTable

Setting up the Angular REST URL using the localhost address

Issue with passing parameters to function when calling NodeJS Mocha

sending information to ng-content from mother in Angular

Why won't my Angular application properly set the background when there are two or more components within it?

Uploading files with WebDriver using TypeScript in JavaScript

Adjusting the background color of a selected date in Fullcalendar using React and Typescript

Is there a way to implement the Jalali calendar (Persian calendar) within React-Big-Calendar?

When working with Typescript, an error may occur related to index types even though the constant object and its

What is the best way to execute multiple functions simultaneously in Angular?

Error encountered in Nest.js tests due to dependency injection issues between modules. The module 'src/foo/foo.module' cannot be located from 'bar/bar.service.spec.ts'

Dealing with Typing Errors in Angular with Typescript: Error message 'x' is not a function

Attempting to access a variable before it has been initialized may result in an error, especially if the variable

The API in Next.js functions perfectly in a local environment but encounters issues in a production