Search results

Validation

In-place Editor component supports validation and it can be achieved by adding rules to the validationRules property, its child property key must be same as name property, otherwise validation not performed. Submitting data to the server or calling the validate method validation executed.

In the following sample, first editor value submitted without select any date, so the default error message will be displayed below the DatePicker element. Second editor configured with the validating event with the handler. In handler event errorMessage argument value modified and it will show below the DatePicker element.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
index.css
import { Component } from '@angular/core';
import { ValidateEventArgs } from '@syncfusion/ej2-angular-inplace-editor';


@Component({
    selector: 'app-root',
    template: `
    <div id='container'>
    <table class="table-section">
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Default Error Message </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor #textBox id="textBox" type="Date" name="Today" emptyText="dd/mm/yyyy" mode="Inline" [model]="model" [validationRules]="validation"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Customized Error Message </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor #date id="date" type="Date" mode="Inline" emptyText="dd/mm/yyyy" [model]="model" name="TodayCustom" [validationRules]="rules" (validating)="validating($event)"></ejs-inplaceeditor>
            </td>
        </tr>
    </table>
</div>
    `
})

export class AppComponent {
    public model: object = { placeholder: 'Select date' };
    public validation: object = { Today: { required: true}};
    public rules: object = { TodayCustom: { required: true } };

    public validating(e: ValidateEventArgs): void {
        e.errorMessage = 'Field should not be empty';
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { AppComponent } from './app.component';

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

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 InPlace Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript InPlace Editor Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <app-root>
        <div id='loader'>LOADING....</div>
    </app-root>
</body>
</html>
#container {
    display: flex;
    justify-content: center;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.table-section {
    margin: 0 auto;
}

td {
    padding: 20px 0;
    min-width: 230px;
    height: 100px;
}

.control-title {
    font-weight: 600;
    padding-right: 20px;
    text-align: right;
}
  • For more details about validation configuration, refer this documentation section.

  • For custom validation except specifying validationRules, specify errorMessage at validating event, message will be shown when the value is Empty.