Indeed verification using this in a separate constant

I'm currently working with React and TypeScript, and I need to verify if my groupID exists in an array of [2, 3, 4].

I'm unsure about the validity of my validationSchema as I am encountering issues with a keyword that seems to be missing from the const. My validationSchema is stored in a separate file.

Can anyone provide some guidance?

export const validationSchema = Yup.object().shape
({
      text: Yup
            .string()
            .defined()
            .max(2048, "Az üzenet szövege túl hosszú,"),
      groupID: Yup
              .number()
              .min(1),
      queryParam: Yup
                 .string()
                 .when("is_in_list",
                 {
                        is: [2, 3, 4].includes(this.parent.groupID),
                        then: Yup
                              .string()
                              .defined("Kötelező mező."),
                        otherwise: Yup
                                   .string()
                                   .nullable()
                }),
      isVoteType: Yup
                 .boolean(),
      positiveAnswer: Yup
                      .string()
                      .when("isVoteType",
                      {
                              is: true,
                              then: Yup.string()
                                    .required("Kötelező mező.")
                        }),
      negativeAnswer: Yup
                      .string()
                      .when("isVoteType",
                      {
                              is: true,
                              then: Yup.string()
                                       .required("Kötelező mező.")
                      })
});
typescriptyup

Answer №1

import * as Yup from "yup";

export const validationSchema = Yup.object().shape
({
      name: Yup
            .string()
            .required()
            .max(2048, "The name is too long,"),
      groupID: Yup
              .number()
              .min(1),
      queryParam: Yup
                 .string()
                 .when("groupID",
                 {
                        is: (groupID: number) =>  groupID > 1,
                        then: Yup.mixed()
                                 .required("Mandatory field.")
                  }),
      isVoteType: Yup
                 .boolean(),
      positiveFeedback: Yup
                      .string()
                      .when("isVoteType",
                      {
                              is: (isVoteType: boolean) => isVoteType,
                              then: Yup.string()
                                       .required("Mandatory field.")
                        }),
      negativeFeedback: Yup
                      .string()
                      .when("isVoteType",
                      {
                              is: (isVoteType: boolean) => isVoteType,
                              then: Yup.string()
                                       .required("Mandatory field.")
                      })
});

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

My goal is to intentionally trigger an eslint error when importing a file from index.ts

Is there a way to enforce importing components from index.ts within the src/components directory using eslint rules or plugins? // index.ts (src/components/Forms) export { Input } from './Input'; export { CheckBox } from './CheckBox'; ...

typescriptnext.jseslinttypescript-eslint

Leveraging jest for handling glob imports in files

My setup involves using webpack along with the webpack-import-glob-loader to import files utilizing a glob pattern. In one of my files (src/store/resources/module.ts), I have the following line: import '../../modules/resources/providers/**/*.resource. ...

javascripttypescriptjestjsglobts-jest

Guidance on showcasing the current day's weekday name through TypeScript

I am perplexed about how to begin in TypeScript after successfully setting up the display using gate. ...

typescript

Instance property value driven class property type guard

Is it possible to create a class example that can determine the config type based on the value of animalType instance: enum Animal { BIRD = 'bird', DOG = 'dog', } type Base = { id: number } // Object example type Smth = Base & ...

typescript

What is the reason behind the lack of exported interfaces in the redux-form typings?

I've been exploring how to create custom input fields for redux-form. My journey began by examining the Material UI example found in the documentation here. const renderTextField = ({input, label, meta: { touched, error }, ...custom }) => < ...

typescriptredux-form

What is the best way to distinguish between a button click and a li click within the same li element

In my angular and css GUI, each line is represented as an li inside a ul with a span. The functionality includes a pop-up opening when clicking on the li background and another action occurring when pressing the button (as intended). The issue arises when ...

htmlangulartypescript

Library for Nodejs that specializes in generating and converting PDF/A files

Is there a library available that can convert/create a PDF/A file? I've been searching for solutions but the existing answers suggest using an external service or provide no response at all. I heard about libraries in other languages like ghostscriptP ...

javascriptnode.jstypescriptpdf

Creating a setup in TypeScript to enable imports between CommonJS and ES modules (for node-fetch and Express)

I'm facing a challenge in trying to integrate two libraries into a single project: fetch-node, an ES module, and Express, which follows the CommonJS format. The issue arises from needing to import fetch-node using: import fetch from 'node-fetch&a ...

node.jstypescriptexpressfetch-api

Which components can be interacted with in Protractor?

The element I am attempting to engage with utilizes the ng-sortable attribute and consists of a few draggable and sort-able divs. await viewTransaction.getEl('div#dragdrop-boundary').sendKeys(protractor.Key.ARROW_DOWN); Failed: element not inte ...

typescripttestingselenium-webdriverprotractorng-sortable

What is the best way to display HTML file references in TypeScript files using VSCode when working with Angular templates?

Did you know that you have the option to enable specific settings in VSCode in order to view references within the editor? Take a look at the codes below: "typescript.implementationsCodeLens.enabled": true, "javascript.referencesCodeLens.enabled": true I ...

angulartypescriptvisual-studio-codereference

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Sample link to see the demonstration: https://stackblitz.com/edit/react-5xt9r5?file=demo.tsx I am looking for a way to conceal a fixed div once I reach the bottom of its parent container while scrolling down. Below is a snippet illustrating how I struct ...

javascriptcssreactjstypescriptmaterial-ui

Choosing a single item from multiple elements in React using React and typescript

In this particular project, React, TypeScript, and ant design have been utilized. Within a specific section of the project, only one box out of three options should be selected. Despite implementing useState and toggle functionalities, all boxes end up bei ...

javascripthtmlreactjstypescript

Encountering errors while adding Storybook to a TypeScript-react project with existing stories

I recently added storybook to my TypeScript React project, but I encountered an error when running yarn storybook. The issue seems to be related to the "as" keyword in the generated code. -- Error message Parsing error: Missing semicolon 10 | back ...

typescriptstorybook

Is there a method or alternative solution for deconstructing TypeScript types/interfaces?

Imagine a scenario where a class has multiple type parameters: class BaseClass<T extends T1, U extends U1, V extends V1, /* etc. */ > Is there a method to consolidate these type arguments in a way that allows for "spreading" or "destructuring," sim ...

typescript

Optimal Approach for Redirecting Authorization

I'm currently working on setting up an authorization feature for my Angular application. Here is the detailed process I am following: First, I generate a state and code in the front end. Upon clicking the login button, the application redirects to /a ...

angulartypescriptredirectoauth-2.0oauth

Utilizing JavaScript's Array.sort() method for sorting objects with varying properties

Currently, I am dealing with these specific Objects: let obj1 = { from: Date, to: Date } let obj2 = { date: Date } These Objects have been placed in an Array: let arr = [ obj1, obj2 ] My goal is to organize the objects within the array by using arr.sort( ...

javascripttypescriptsorting

React Typescript Mui causing `onBlur` event to trigger with every change occurring

I'm currently developing a front-end application using Typescript and React with MUI. The form code I have written is as follows: <TextField label="Password" value={this.state.password} placeholder="Choose a password" type="password" onC ...

reactjstypescriptbluronblurmui

Refine a union type by considering the properties already defined in an object

interface CustomHTMLElement { htmlPropA: string, htmlPropB: string, } interface CustomHTMLInput { inputPropA: string, inputPropB: string, } type CustomElement = | CustomHTMLElement | CustomHTMLInput const element: CustomElement = { inputPr ...

typescriptintellisense

Deliver transcluded data to the descendant element of a hierarchical roster

I understand that there have been similar questions asked before, but my situation is slightly different. I am currently constructing a nested list and I want to include custom HTML content in each grandchild element alongside some common HTML. The problem ...

javascriptangulartypescript

What could be causing the content in my select box to change only when additional select boxes are introduced?

When working with a form in next.js and using select boxes from material UI, I encountered an issue. The number of select boxes should change based on user input, but when I modify the value inside a select box, the displayed text does not update until I a ...

node.jstypescriptnext.jsmaterial-ui