How to Restrict Special Characters in Angular AutoComplete Component?

This article explains how to restrict special characters in Angular Autocomplete. To restrict special characters from being entered into the Syncfusion Angular AutoComplete input field, you can utilize the input event to validate the content and remove any unwanted characters.

Below is an example demonstrating how to implement this in an Angular application:

@Component({
  template: `
    <ejs-autocomplete 
      id='atcelement' 
      [dataSource]='sportsData' 
      [fields]='fields' 
      [placeholder]='text' 
      [query]='query' 
      [filterType]='filterType' 
      [sortOrder]='sorting' 
      (input)='onInput($event)'>
    </ejs-autocomplete>
  `,
  standalone: true,
  imports: [FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule]
})
export class AppComponent {
  onInput(event: any): void {
    const inputElement = event.target as HTMLInputElement;
    // Remove special characters
    inputElement.value = inputElement.value.replace(/[^a-zA-Z0-9 ]/g, '');
  }
}

In this example, the onInput method is used to listen for the input event on the AutoComplete component. It replaces any special characters in the input value with an empty string, effectively restricting special characters from being entered.

Sample

To see how to restrict special characters in the AutoComplete input field, refer to the following sample.

• Angular sample

Conclusion

We hope you enjoyed learning about how to restrict special characters in the Angular AutoComplete component.

You can refer to our Angular AutoComplete feature tour page to know about its other groundbreaking feature representations and documentation and how to quickly get started for configuration specifications. You can also explore our Angular AutoComplete example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!