# ajv

Options to configure `Ajv`. A list of all [supported options can be found here](https://ajv.js.org/options.html)

## Default value

```javascript
{
  keywords: {},
  plugins: [],
  locale: null,
  options: {
    allErrors: true;
  }
}
```

> Ajv option `allErrors` is always set to true, there is no way to override this as it is used internally for validation

## Examples

### Enable $data references

See [Ajv's documentation about $data references](https://ajv.js.org/guide/combining-schemas.html#data-reference) for more details. `$data` in this example can be substituted for any other [supported Ajv option](https://ajv.js.org/options.html)

```javascript
  data() {
    return {
      options: {
        ajv: {
          options: {
            $data: true
          }
        }
      },
      model: {
        ...
      },
      jsonSchema: {
        ...
      },
      uiSchema: [
        ...
      ]
    }
  }
```

```markup
<template>
  <vue-form-json-schema
    v-model="model"
    :options="options"
    :schema="jsonSchema"
    :ui-schema="uiSchema"
  />
</template>
```

### Localize error messages

This example uses [ajv-i18n](https://github.com/epoberezkin/ajv-i18n). Any errors will be translated using the locale function provided before the fields gets access to them.

```javascript
// Import swedish localization
const sv = require('ajv-i18n/localize/sv');

export default {
  data() {
    return {
      options: {
        ajv: {
          locale: sv
        }
      },
      model: {
        ...
      },
      jsonSchema: {
        ...
      },
      uiSchema: [
        ...
      ]
    }
  }
}
```

```markup
<template>
  <vue-form-json-schema
    v-model="model"
    :options="options"
    :schema="jsonSchema"
    :ui-schema="uiSchema"
  />
</template>
```

### Add Ajv keywords

In this example we will add a custom keyword which checks that the value of the input is not present in the `blacklist` array

```javascript
// These values are forbidden
const blacklist = ['forbidden', 'values'];

export default {
  data() {
    return {
      options: {
        ajv: {
          keywords: {
            notBlackListed: {
              // Needs to be set to true for the validate function to be able to add custom errors
              errors: true,
              validate: (schema, value) => {
                // This is what Ajv wants, and it's terrible.
                // There is no way to add custom error messages without
                // modifying the validate function's `errors` property
                const self = this.options.ajv.keywords.notBlackListed.validate;

                // Create an empty array to hold any errors
                self.errors = [];

                if (this.blacklist.indexOf(value) >= 0) {
                  // This value is blacklisted
                  self.errors.push({
                    message: 'Value is blacklisted!',
                    keyword: 'uniqueLabel',
                    params: {
                      keyword: 'uniqueLabel',
                    },
                  });
                }

                // Ajv needs a boolean value returned to determine if the validation was a success
                // If true is returned, no error is generated, even if the errors array is populated
                return self.errors.length === 0;
              },
            },
          },
        },
      },
      model: {},
      jsonSchema: {
        type: 'object',
        properties: {
          myValue: {
            type: 'string',
            notBlackListed: true,
          },
        },
      },
      uiSchema: [
        {
          component: 'input',
          model: 'myValue',
          fieldOptions: {
            on: ['change'],
          },
        },
        // This component will output all the errors for myValue model
        {
          component: 'div',
          errorHandler: true,
          model: 'myValue',
        },
      ],
    };
  },
};
```

```markup
<template>
  <vue-form-json-schema
    v-model="model"
    :options="options"
    :schema="jsonSchema"
    :ui-schema="uiSchema"
  />
</template>
```

### Extend Ajv instance

Note that this is neither tested nor supported but in theory this would give extra Ajv features such as [ajv-async](https://github.com/epoberezkin/ajv-async) and [ajv-merge-patch](https://github.com/epoberezkin/ajv-merge-patch) access to the internal `Ajv` instance running inside `vue-form-json-schema`.

By adding the required plugin to the `plugins` section in the ajv options it is possible to load and apply the required plugin to the ajv instance that is used by `vue-form-json-schema`. This comes in handy when custom error messages must be added with [ajv-errors](https://github.com/epoberezkin/ajv-errors).

```javascript
// Import ajv-errors plugin
const ajvErrors = require('ajv-errors');

export default {
  data() {
    return {
      options: {
        ajv: {
          plugins: {
            ajvErrors
          }
        }
      },
      model: {
        ...
      },
      jsonSchema: {
        ...
      },
      uiSchema: [
        ...
      ]
    }
  }
}
```

```markup
<template>
  <vue-form-json-schema
    v-model="model"
    :options="options"
    :schema="jsonSchema"
    :ui-schema="uiSchema"
  />
</template>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jarvelov.gitbook.io/vue-form-json-schema/api/vue-form-json-schema/options/ajv.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.