New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid Editing Validation

The Angular Grid supports validation for editing operations, allowing you to ensure data integrity and provide user feedback when validation fails. You can implement a validation functionality both when using built-in editors and custom editor templates with Reactive Forms.

The following example demonstrates how to enable validation with built-in editors, including required field validation, minimum value constraints, and pattern validation.

Change Theme

Theme

Loading ...

Validation with Built-in Editors

When using the Grid's built-in editing directives, validation is handled through the FormGroup created by the createFormGroup callback function. The Grid automatically prevents saving changes when the form is invalid and provides visual feedback through the built-in validation styling.

typescript

public createFormGroup(args: CreateFormGroupArgs): FormGroup {
    const item = args.isNew ? new Product() : args.dataItem;

    const formGroup = this.formBuilder.group({
        ProductID: item.ProductID,
        ProductName: [item.ProductName, Validators.required],
        UnitPrice: [item.UnitPrice, [Validators.required, Validators.min(0)]],
        UnitsInStock: [
            item.UnitsInStock,
            Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])
        ],
        Discontinued: item.Discontinued,
    });

    return formGroup;
}

Validation with Custom Editor Templates

When using custom editor templates, you can display validation messages by accessing the formGroup field passed by the EditTemplateDirective. Use the form state properties (such as invalid, untouched, and others) to toggle validation messages dynamically.

The following example demonstrates how to render validation messages inside a Kendo UI for Angular Popup that appear when values entered in the custom cell editors are invalid.

Change Theme

Theme

Loading ...

To implement Popup validation messages in your Grid editing templates, follow these steps:

Create a custom directive to expose the ElementRef of the custom editor component. This directive serves as an anchor point for the Popup positioning.

typescript

@Directive({
  selector: '[popupAnchor]',
  exportAs: 'popupAnchor'
})
export class PopupAnchorDirective {
  constructor(public element: ElementRef) {}
}

Apply the directive to your custom editor component and create a template reference that will be used as an anchor of the Popup.

html

<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
    <kendo-textbox 
        #input="popupAnchor" 
        popupAnchor 
        [formControl]="formGroup.get(column.field)">
    </kendo-textbox>
    <kendo-popup [anchor]="input.element" ... >
        Product name is required
    </kendo-popup>
</ng-template>

Use Angular's structural directive to conditionally display the Popup based on the validation state of the associated FormControl for the current column field.

html

<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
    ...
    @if (formGroup.get(column.field).invalid && !(isNew && formGroup.get(column.field).untouched)) {
    <kendo-popup [anchor]="input.element">
        @if (formGroup.get(column.field).errors?.['required']) {
        <div>Product name is required</div>
        } 
        @if (formGroup.get(column.field).errors?.['minlength']) {
        <div>Product name must be at least 3 characters</div>
        }
    </kendo-popup>
    }
</ng-template>

Angular Data Grid Editing Validation

Validation with Built-in Editors

Validation with Custom Editor Templates

Suggested Links