Validation in Angular Textbox component

28 Sep 20234 minutes to read

The TextBox supports three types of validation styles namely error, warning, and success. These states are enabled by adding corresponding classes .e-error, .e-warning, or .e-success to the input parent element.

app.component.ts

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

@Component({
    selector: 'app-root',
    template: `<div class="wrap">
        <input class="e-input e-warning" type="text" placeholder="Input with warning"/>
        <div class="e-input-group e-error">
            <input class="e-input" type="text" (focus)="focusIn($event.target)"
            placeholder = "Input with error" (blur)="focusOut($event.target)"/>
        </div>
        <div class="e-input-group e-success">
            <input class="e-input" type="text" (focus)="focusIn($event.target)"
            placeholder = "Input with success" (blur)="focusOut($event.target)"/>
        </div>
    </div>`
})

export class AppComponent {
    public focusIn(target: any): void {
        target.parentElement.classList.add('e-input-focus');
    }

    public focusOut(target: any): void {
        target.parentElement.classList.remove('e-input-focus');
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Adding mandatory asterisk to placeholder and float label

You can add a mandatory asterisk(*) to placeholder and float label using .e-float-input.e-control-wrapper .e-float-text::after class.

app.component.ts

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

@Component({
    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 { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {TextBoxModule} from '@syncfusion/ej2-angular-inputs';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TextBoxModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);