Validation in Angular TextBox component

21 Aug 20253 minutes to read

The Angular TextBox component provides visual feedback for form validation through three distinct validation states: error, warning, and success. These visual states help users understand the validation status of their input and improve the overall form experience.

Validation States

The TextBox component supports visual validation states that can be applied by adding corresponding CSS classes to the cssClass property:

Error state (.e-error): Indicates invalid input that requires correction
Warning state (.e-warning): Suggests potential issues or recommendations
Success state (.e-success): Confirms valid input

app.component.ts
main.ts
import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
    imports: [
        TextBoxModule,
        FormsModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
         <ejs-textbox placeholder = "Input with warning" cssClass="e-warning"></ejs-textbox>
         <ejs-textbox placeholder = "Input with error" cssClass="e-error"></ejs-textbox>
         <ejs-textbox placeholder = "Input with success" cssClass="e-success"></ejs-textbox>
    </div>`
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Adding Mandatory Asterisk to Labels

For required fields, add a visual asterisk indicator to placeholder text and float labels using CSS. This provides clear visual cues about mandatory form fields.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import {TextBoxModule} from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';

@Component({
imports: [
        
        TextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
    <h4>Floating label as auto</h4>
    <div class='textboxes'>
      <ejs-textbox placeholder="First Name" floatLabelType="Auto"></ejs-textbox>
    </div>

    <h4>Floating label as always</h4>
    <div class='textboxes'>
      <ejs-textbox placeholder="First Name" floatLabelType="Always"></ejs-textbox>
    </div>
  </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The asterisk styling uses the CSS selector .e-float-input.e-control-wrapper .e-float-text::after to append the mandatory indicator to float labels automatically.