SmartPasteButton Validation
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.
Standard 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 with real-time feedback.
For numeric fields with validators like Validators.min() and Validators.max(), configure the formFields input with type: 'number' to ensure proper data type handling:
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}$/)]]
});Preventive Validation (Guiding the AI)
You can prevent invalid data generation at the source by providing specific constraints in your field configuration. This guides the AI to generate values that meet your criteria, reducing the need for post-processing.
The following example demonstrates preventive validation strategies using contextual descriptions and constrained lists. The demo shows how the AI maps "High" to a numeric priority (4-5) and "Done" to the valid status "Completed".
Contextual Descriptions
Use the description property to provide validation context, such as numeric ranges or format requirements. The AI uses this context to interpret the clipboard content correctly.
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 strict set of options, use the fixed-choices type and the allowedValues array. This forces the AI to assign one of your specific values, preventing "hallucinated" or invalid options.
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 (Interception)
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 following example demonstrates manual interception and validation after AI processing.
public onRequestEnd(event: SmartPasteRequestEndEvent): void {
const values = event.response.body.fieldValues;
// 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 });
}
}Pre-Validation with requestStart Event
You can also perform validation on the clipboard content itself before sending data to the AI service using the requestStart event. This is useful for checking content length or format to avoid unnecessary API calls.
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.');
}
}The following example demonstrates pre-validation before sending data to the AI service.