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

SmartPasteButton Validation

Updated on Nov 6, 2026

The SmartPasteButton offers flexible validation strategies. You can rely on standard Angular form validation, guide the AI to generate valid data, or manually intercept and validate results before they populate the form.

The following example demonstrates how to copy contact information from a chat message and paste it into a form. When the postal code is missing from the source data, validation triggers immediately to indicate the required field.

Loading ...

Form Validation

The simplest and most common approach is to rely on standard Angular validators. The SmartPasteButton populates the form controls with the raw data extracted by the AI, and the form displays validation errors based on your existing rules (for example, Validators.required, Validators.pattern).

The component respects the form's state and updates the validity status immediately after pasting.

this.formGroup = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  age: [null, [Validators.min(18), Validators.max(100)]]
});

The following example demonstrates validation integration and displays errors when you submit the form.

Loading ...

For numeric fields with validators such as Validators.min() and Validators.max(), set type to number in formFields. This identifies the field as numeric in the request; Angular validators still determine whether the populated value meets your constraints.

typescript
public formFields: SmartPasteFormField[] = [
  {
    field: 'email',
    type: 'string',
    description: 'Email address'
  },
  {
    field: 'age',
    type: 'number',
    description: 'Age in years, must be 18 or older'
  },
  {
    field: 'phone',
    type: 'string',
    description: 'Phone number with area code in format (XXX) XXX-XXXX'
  }
];

this.formGroup = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  age: [null, [Validators.required, Validators.min(18), Validators.max(100)]],
  phone: ['', [Validators.required, Validators.pattern(/^\(\d{3}\) \d{3}-\d{4}$/)]]
});
html
<button 
  kendoSmartPasteButton
  [requestUrl]="aiUrl"
  [formFields]="formFields">
  Smart Paste
</button>

AI Guidance for Extracted Values

Provide constraints in your field configuration to guide the AI service toward values that meet your criteria. These instructions can reduce invalid results, but they do not validate or guarantee the response.

The following example demonstrates AI guidance with contextual descriptions and constrained lists. The demo shows the service mapping "High" to a numeric priority (4-5) and "Done" to the status "Completed".

Loading ...

Contextual Descriptions

Use the description property to provide context, such as numeric ranges or format requirements. The AI service can use this information to interpret clipboard content.

public formFields: SmartPasteFormField[] = [
    {
        field: 'age',
        type: 'number',
        // Explicitly state the range requirement
        description: 'Age in years. Value must be between 18 and 100.'
    },
    {
        field: 'deliveryDate',
        type: 'kendo-input',
        description: 'Preferred delivery date. Must be a future weekday.'
    }
];

Constrained Lists

For fields with a fixed set of options, use the fixed-choices type and the allowedValues array. This gives the AI service the permitted values to consider, but it does not guarantee that the response contains one of them.

Validate returned values with your form rules or inspect them in the requestEnd event before the SmartPasteButton applies them.

public formFields: SmartPasteFormField[] = [
    {
        field: 'status',
        type: 'fixed-choices',
        description: 'Current project status',
        // The AI will map clipboard text (like "done", "finished", "completed") 
        // to one of these valid values
        allowedValues: ['Not Started', 'In Progress', 'Completed', 'On Hold']
    }
];

Manual Validation

For complex scenarios, you can validate data after the AI processes it but before it populates the form using the requestEnd event. This allows you to inspect the received values and choose whether to apply them.

If the data does not meet your criteria, you can prevent the default behavior to stop the automatic form update.

The requestEnd event also fires when the request fails. Check that the response contains fieldValues before you read it.

The following example demonstrates manual interception and validation after AI processing.

Loading ...

public onRequestEnd(event: SmartPasteRequestEndEvent): void {
    const values = event.response?.body?.fieldValues;

    if (!values) {
        return;
    }

    // Example: Validate specific business logic
    if (values['age'] < 18) {
        // Option 1: Prevent the entire update
        event.preventDefault();
        this.notificationService.show('Age validation failed.');
        
        // Option 2: Manually update only valid fields
        // form.patchValue({ ...values, age: null });
    }
}

Content Pre-Validation

You can also validate the clipboard content itself before sending it to the AI service by using the requestStart event. This is useful for checking content length or format to avoid unnecessary API calls.

typescript
public validateBeforeRequest(event: SmartPasteRequestStartEvent): void {
    const clipboardText = event.requestData.content;

    // Validate minimum content length to save API tokens
    if (clipboardText.length < 50) {
        event.preventDefault();
        console.warn('Clipboard content is too short to process.');
    }
}
html
<button 
  kendoSmartPasteButton
  [requestUrl]="aiUrl"
  (requestStart)="validateBeforeRequest($event)">
  Smart Paste
</button>

The following example demonstrates pre-validation before sending data to the AI service.

Loading ...