Error message displayed in console due to AJV JSON schema validation when the maximum character limit is exceeded

In this provided example:

{
  "default": "adsds",
  "max": 1
}

I attempted to reference the dynamically provided 'max' value and validate the number of characters entered in the 'default' field. To achieve this, I created a schema as follows:

{
  "type": "object",
  "properties": {
    "max": {
      "type": "integer"
    },
    "default": {
      "type": "string",
      "maxLength": {
        "$data": "1/max"
      }
    }
  }
}

However, this approach did not work and an error was triggered in the console stating,

ERROR Error: schema is invalid: data/properties/default/maxLength must be integer

Please visit the following link to investigate the mentioned issue.

https://codesandbox.io/s/beautiful-frog-2hrlch?file=/src/app/app.component.ts

Versions: "ajv": "^8.12.0", "ajv-errors": "^3.0.0", "ajv-keywords": "^5.1.0",

I have exhausted all options but it still does not work

angulartypescriptjsonschemajson-schema-validatorajv

Answer №1

In order for the functionality to work, you must activate it. Remember that $data is not a standard term, so be aware that any schemas using $data may not function properly with JSON Schema implementations other than ajv.

const ajv = new Ajv({$data: true})

For more information, visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The declared type 'never[]' cannot be assigned to type 'never'. This issue is identified as TS2322 when attempting to pass the value of ContextProvider using the createContext Hook

I'm encountering an issue trying to assign the state and setState to the value parameter of ContextProvider Here's the code snippet:- import React, { useState, createContext } from 'react'; import { makeStyles } from '@material-ui ...

reactjstypescriptreact-hooksreact-state-managementcreatecontext

Angular compodoc tool is not considering *.d.ts files

Is there a way to make compodoc include .d.ts files in the documentation generation process for my Angular project? Even though I've added all .d.ts files to tsconfig.compodoc.json as shown below: { "include": [ "src/**/*.d. ...

angulartypescriptdocumentationcompodoc

Angular app encountering an error with inline style due to server's CSP response header configuration

I have encountered a problem while working on my Angular application. Specifically, I am currently developing in an Angular 8 environment using the CLI. When running the application on my local server, everything functions as expected without any issues. ...

angularwebpackcontent-security-policy

Guide on utilizing external namespaces to define types in TypeScript and TSX

In my current project, I am working with scripts from Google and Facebook (as well as other external scripts like Intercom) in TypeScript by loading them through a script tag. However, I have encountered issues with most of them because I do not have acces ...

typescriptfacebook-javascript-sdk

Gridster2 for Angular: Resolving Overlapping Grid Items during Drag

The Angular version being used is 4.0.0 The angular-gridster2 library version being used is 2.10.0 When dragging the items randomly over other items, they become overlapped (as shown in the image below) The circled numbers represent the number of column ...

angularoverlapangular-gridster2

A guide to building a versatile higher-order function using TypeScript

I'm struggling with creating a function that can add functionality to another function in a generic way. Here's my current approach: /** * Creates a function that first calls originalFunction, followed by newFunction. * The created function re ...

typescriptgenerics

typescript ways to exclude enum values

I am working with enums in TypeScript. enum Status { Cancelled = 'cancelled', Completed = 'completed', Created = 'created' } Now, I need to create another enum that includes only the values Completed and Created. enum S ...

reactjstypescript

Reducing SCSS import path in Angular 7

Creating a component that is deeply nested raises the issue of importing shared .scss files with long paths: @import '../../../app.shared.scss'; This hassle doesn't exist when it comes to .ts files, thanks to the configuration in tsconfig. ...

angulartypescriptsassconfiguration

An error occurred: Unable to access the 'basemapLayer' property due to it being undefined

Oops! TypeError: Unable to access 'basemapLayer' property of undefined I recently put together a simple application using the Angular CLI. After successfully building and running the application with ng serve -o, I encountered an issue in Chrome ...

angulartypescriptleafletangular-cliesri-leaflet

Converting TypeScript to JavaScript: A Step-by-Step Guide

I have this code written in Typescript and I need to convert it to JavaScript const Home = (props) => { return ( <div> {props.name ? 'Hi ' + props.name : 'You are not logged in'} </div> ); }; How can I re ...

javascriptreactjstypescript

What is the best way to display API error messages to the user?

When a user tries to upload a file that is not an image, I need to display the error message returned from a REST API. The JSON response received from the API will look something like this: { "publicError": "Could not be uploaded, it is not an image! ...

javareactjstypescriptspring-boot

Encountered an unhandled promise rejection: TypeError - The Form is undefined in Angular 6 error

Whenever I attempt to call one .ts file from another using .Form, I encounter the following error: Uncaught (in promise): TypeError: this.Form is undefined The file that contains the error has imported the .ts file which I intend to pass values to. ...

javascriptangularangular6angular7

Alert an Angular 2 component about changes triggered by a service

Currently working with Angular 2 and utilizing an AuthService for authentication. I am at a crossroads on how to effectively inform other components when a user logs in or out. Seeking advice on the best approach for managing this situation. Any insights ...

authenticationangulartypescript

Searching for columns should be at the top of an angular datatable, not at the bottom

In my Angular 7 project, I am utilizing the library found at this link. I have followed the example provided, which can be seen here. Everything is working perfectly, except for the position of the search columns. I would like the search columns to appear ...

javascriptcssangulardatatablesangular-datatables

What is the best method to reset values in ngx-bootstrap date picker?

At the moment, it is only accepting the most recently selected values. To see a live demo, click here. ...

javascriptangulardatepicker

"Upon compilation, the Angular app displays a blank screen instead of the expected

Recently, I attempted to create a client for a web application using Angular. I initiated the process with ng new client, and when I ran it at that point, it displayed the default webpage. Afterwards, I made modifications to the app.component.{html, css ...

angulartypescript

Difficulty displaying API information on a web browser with react.js

I am currently working on developing a trivia game using React.js Typescript and The Trivia API. I have been successfully passing data between components with useContext and navigating through components using react-router-dom. However, I encountered an is ...

javascriptreactjstypescriptapiaxios

The issue arises when the desired image size is not reflected correctly on the background after changing

I've been working on a basic image slideshow where the background image changes based on user selection. However, I've noticed that when I change the image for the first time, the backgroundSize: cover property seems to disappear. Even if I try c ...

angulartypescript

Uploading Files with Typescript Promises

Hello everyone, I'm facing an issue where a dialog window is opening before all the files are uploaded to the server. Can anyone please guide me on what might be going wrong in my code? public UploadAll() { this.doAsyncTask().then(() => ...

typescript

Designing a web application with Angular2

As a newcomer to Angular2, I have recently started working on creating a simple hello world application. I have come across the concept of Modules and Components in Angular2. My main source of confusion lies in how to properly design an Angular2 applicat ...

javascriptangulartypescript