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

Angular TreeList Editing Validation

Updated on Jun 11, 2026

The Angular TreeList supports validation for editing operations, allowing you to ensure data integrity and provide user feedback when validation fails. You can implement validation 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.

Change Theme

Theme

Loading ...

Validation with Built-in Editors

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

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

    return this.formBuilder.group({
        id: item.id,
        name: [item.name, Validators.required],
        role: [item.role, Validators.required],
        yearsExperience: [
            item.yearsExperience,
            Validators.compose([Validators.required, Validators.min(0)])
        ],
    });
};

Validation with Custom Editor Templates

When you use 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 appears when values entered in the custom cell editors are invalid.

Change Theme

Theme

Loading ...

To implement Popup validation messages in your TreeList 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.

@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 serves as the anchor of the Popup.

html

<ng-template kendoTreeListEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
    <kendo-autocomplete
        #anchor="popupAnchor"
        popupAnchor
        placeholder="Select position..."
        [data]="suggestions"
        [formControl]="formGroup.get(column.field)">
    </kendo-autocomplete>
    <kendo-popup [anchor]="anchor.element" ...>
        Position is required
    </kendo-popup>
</ng-template>

Use Angular's @if control flow block to conditionally display the Popup based on the validation state of the associated FormControl for the current column field. Include an SVG icon to enhance the validation message presentation.

html

<ng-template kendoTreeListEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
    <kendo-numerictextbox
        #anchor="popupAnchor"
        popupAnchor
        format="#"
        [formControl]="formGroup.get(column.field)">
    </kendo-numerictextbox>
    @if (formGroup.get(column.field).invalid && !(isNew && formGroup.get(column.field).untouched)) {
    <kendo-popup [anchor]="anchor.element" popupClass="k-widget k-tooltip k-tooltip-validation k-invalid-msg">
        <kendo-svgicon [icon]="exclamationIcon" size="xlarge"></kendo-svgicon>
        Extension must be a positive number
    </kendo-popup>
    }
</ng-template>

Angular TreeList Editing Validation

Validation with Built-in Editors

Validation with Custom Editor Templates

See Also