# 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/validation/overview/source.txt)

## 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.

```typescript
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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/validation/validation-forms/source.txt)

For numeric fields with validators such as `Validators.min()` and `Validators.max()`, set `type` to `number` in [`formFields`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#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".

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/validation/preventive-validation/source.txt)

### Contextual Descriptions

Use the [`description`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpasteformfield#description) property to provide context, such as numeric ranges or format requirements. The AI service can use this information to interpret clipboard content.

```typescript
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`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpasteformfield#type) type and the [`allowedValues`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpasteformfield#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`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#requestEnd) event before the SmartPasteButton applies them.

```typescript
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`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/validation/manual-interception/source.txt)

```typescript
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`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/validation/prevalidation/source.txt)

## Suggested Links

* [SmartPasteButton Configuration](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/smartpastebutton/configuration)
* [SmartPasteButton Events](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/smartpastebutton/events)
* [SmartPasteButton API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent)
* [Angular Form Validation Guide](https://angular.dev/guide/forms/form-validation)
* [Getting Started with Kendo UI for Angular Buttons](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/installation/getting-started)