SPFx webpart form validation using React Formik

Published May 26 2021 05:56 AM 1,948 Views
Senior Member

Introduction

 

Formik is the world's most popular open-source form library for React and React Native. We can also use this library in our SPFx web part as well to manage form validations. Using this library we don't have to write custom validations. so let's start step-by-step implementation.

 

What is formik?

 

Formik is a small library that helps us with the these parts: Getting values in and out of form state. Validation and error messages. Handling form submission.

Formik is designed to manage forms with complex validation with ease.

Formik supports synchronous and asynchronous form-level and field-level validation.

Furthermore, it comes with baked-in support for schema-based form-level validation through Yup.

For more details about Fromik refer to the below articles,

 

Formik official documentation 

Manage Forms In React With Formik 

Formik validation Schema 

 

SharePoint List Structure

 

Create a list called Tasks with below fields,

 

Field Name(Internal name) Field Type
Title (default) Single line of text
StartDate

Date and Time (Date only)

EndDate Date and Time (Date only)
ProjectName Single line of text
TaskDetails Multiple lines of text

 

After the creation of the list, we will start to create the SPFx web part.

 

Formik implementation with SPFx

 

Open a command prompt
Move to the path where you want to create a project
Create a project directory using:

 

md react-formik

 

Move to the above-created directory using:

 

cd react-formik

 

Now execute the below command to create an SPFx solution:

 

 yo @microsoft/sharepoint 

 

It will ask some questions, as shown below,

 

Project Setup.png

 

After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:

 

code .

 

Now we will install the following packages:

 

npm i formik
npm i yup
npm i @pnp/spfx-controls-react
npm i @microsoft/sp-dialog

 

In the end, our output will be like this,

 

Output.png

 

 

After the successful installation, we will start our form implementation.

 

1. Create below files

 

I{webpartname}State.ts inside src/webparts/reactFormik/components

SPService.ts file inside src/webparts/shared/service

 

In the end, our structure will be looks like this,

 

Project Structure.png

 

2. Create a state interface as below inside IReactFormikState.ts.

 

 

 

 

export interface IReactFormikState {
  projectName?: string;
  startDate?: any;
  endDate?: any;
}

 

 

 

 

3. Create a method to create a task inside SPService.ts.

 

 

 

 

import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/webs";
import "@pnp/sp/site-users/web";
import { Web } from "@pnp/sp/webs";

export class SPService {

    private web;

    constructor(url: string) {
        this.web = Web(url);
    }

    public async createTask(listName: string, body: any) {
        try {
            let createdItem = await this.web.lists
                .getByTitle(listName)
                .items
                .add(body);
            return createdItem;
        }
        catch (err) {
            Promise.reject(err);
        }
    }
}

 

 

 

 

4. Move to the ReactFormikWebPart.ts. In this, we will pass the current SP context and read site URL from user.

 

 

 

 

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'ReactFormikWebPartStrings';
import ReactFormik from './components/ReactFormik';
import { IReactFormikProps } from './components/IReactFormikProps';
import { sp } from "@pnp/sp/presets/all";

export interface IReactFormikWebPartProps {
  description: string;
  siteUrl: string;
}

export default class ReactFormikWebPart extends BaseClientSideWebPart<IReactFormikWebPartProps> {

  protected onInit(): Promise<void> {

    return super.onInit().then(_ => {
      sp.setup({
        spfxContext: this.context
      });
    });
  }

  public render(): void {
    const element: React.ReactElement<IReactFormikProps> = React.createElement(
      ReactFormik,
      {
        description: this.properties.description,
        context: this.context,
        siteUrl: this.properties.siteUrl ? this.properties.siteUrl : this.context.pageContext.web.absoluteUrl
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyPaneTextField('siteUrl', {
                  label: strings.SiteUrlFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

 

 

 

 

5. Move to the ReactFormik.tsx file to render form and validations

 

yup syntaxs:

 

1. For string: yup.string().required('Required')

2. For date: yup.date().required('Required').nullable()

 

Related to Formik

 

1. Fromik has its own handleReset and handleSubmit method so we don not have to manage manually

2. We have to set state value and error message from control so for that I have created a common method

 

1. In the constructor, we will set the current SP context, bind the service and required methods and initialize the states.

2. Create createRecord() to create task list item using SPService.

3. In the render(), first we will add all the controls like date picker, text field, people picker, and dropdown, etc inside <Formik>.

    then We will set properties as below,

    initialValues - This is one type o state at here we will set empty or null or undefined as an initial level.

    validationSchema - At here we will do validations using yup. so for this, I am creating one const and wills et this constant in this prop.

    onSubmit - At here we will call the method to create a record in the SharePoint list

 

 

 

 

import * as React from 'react';
import styles from './ReactFormik.module.scss';
import { IReactFormikProps } from './IReactFormikProps';
import { IReactFormikState } from './IReactFormikState';
import { SPService } from '../../shared/service/SPService';
import { TextField } from '@fluentui/react/lib/TextField';
import { Stack, } from '@fluentui/react/lib/Stack';
import { Formik, FormikProps } from 'formik';
import { Label } from 'office-ui-fabric-react/lib/Label';
import * as yup from 'yup';
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
import { DatePicker, Dropdown, mergeStyleSets, PrimaryButton, IIconProps } from 'office-ui-fabric-react';
import { sp } from '@pnp/sp';
import { Dialog } from '@microsoft/sp-dialog';

const controlClass = mergeStyleSets({
  control: {
    margin: '0 0 15px 0',
    maxWidth: '300px',
  },
});

export default class ReactFormik extends React.Component<IReactFormikProps, IReactFormikState> {

  private cancelIcon: IIconProps = { iconName: 'Cancel' };
  private saveIcon: IIconProps = { iconName: 'Save' };
  private _services: SPService = null;

  constructor(props: Readonly<IReactFormikProps>) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null
    }
    sp.setup({
      spfxContext: this.props.context
    });

    this._services = new SPService(this.props.siteUrl);
    this.createRecord = this.createRecord.bind(this);
  }

  /** set field value and error message for all the fields */
  private getFieldProps = (formik: FormikProps<any>, field: string) => {
    return { ...formik.getFieldProps(field), errorMessage: formik.errors[field] as string }
  }

  /** create record in sharepoint list */
  public async createRecord(record: any) {
    let item = await this._services.createTask("Tasks", {
      Title: record.name,
      TaskDetails: record.details,
      StartDate: record.startDate,
      EndDate: new Date(record.endDate),
      ProjectName: record.projectName,
    }).then((data) => {
      Dialog.alert("Record inseterd successfully !!!");
      return data;
    }).catch((err) => {
      console.error(err);
      throw err;
    });
  }

  public render(): React.ReactElement<IReactFormikProps> {
    /** validations */
    const validate = yup.object().shape({
      name: yup.string().required('Task name is required'),
      details: yup.string()
        .min('15', 'Minimum required 15 characters')
        .required('Task detail is required'),
      projectName: yup.string().required('Please select a project'),
      startDate: yup.date().required('Please select a start date').nullable(),
      endDate: yup.date().required('Please select a end date').nullable()
    })

    return (
      <Formik initialValues={{
        name: '',
        details: '',
        projectName: '',
        startDate: null,
        endDate: null
      }}
        validationSchema={validate}
        onSubmit={(values, helpers) => {
          console.log('SUCCESS!! :-)\n\n' + JSON.stringify(values, null, 4));
          this.createRecord(values).then(response => {
            helpers.resetForm()
          });
        }}>
        { formik => (
          <div className={styles.reactFormik}>
            <Stack>
              <Label className={styles.lblForm}>Current User</Label>
              <PeoplePicker
                context={this.props.context as any}
                personSelectionLimit={1}
                showtooltip={true}
                showHiddenInUI={false}
                principalTypes={[PrincipalType.User]}
                ensureUser={true}
                disabled={true}
                defaultSelectedUsers={[this.props.context.pageContext.user.email as any]}
              />

              <Label className={styles.lblForm}>Task Name</Label>
              <TextField
                {...this.getFieldProps(formik, 'name')} />

              <Label className={styles.lblForm}>Project Name</Label>
              <Dropdown
                options={
                  [
                    { key: 'Project1', text: 'Project1' },
                    { key: 'Project2', text: 'Project2' },
                    { key: 'Project3', text: 'Project3' },
                  ]
                }
                {...this.getFieldProps(formik, 'projectName')}
                onChange={(event, option) => { formik.setFieldValue('projectName', option.key.toString()) }}
              />

              <Label className={styles.lblForm}>Start Date</Label>
              <DatePicker
                className={controlClass.control}
                id="startDate"
                value={formik.values.startDate}
                textField={{ ...this.getFieldProps(formik, 'startDate') }}
                onSelectDate={(date) => formik.setFieldValue('startDate', date)}
              />

              <Label className={styles.lblForm}>End Date</Label>
              <DatePicker
                className={controlClass.control}
                id="endDate"
                value={formik.values.endDate}
                textField={{ ...this.getFieldProps(formik, 'endDate') }}
                onSelectDate={(date) => formik.setFieldValue('endDate', date)}
              />

              <Label className={styles.lblForm}>Task Details</Label>
              <TextField
                multiline
                rows={6}
                {...this.getFieldProps(formik, 'details')} />

            </Stack>
            <PrimaryButton
              type="submit"
              text="Save"
              iconProps={this.saveIcon}
              className={styles.btnsForm}
              onClick={formik.handleSubmit as any}
            />
            <PrimaryButton
              text="Cancel"
              iconProps={this.cancelIcon}
              className={styles.btnsForm}
              onClick={formik.handleReset}
            />
          </div>
        )
        }
      </Formik >
    );
  }
}

 

 

 

 

6. Move to the ReactFormik.module.scss file to add some relaetd CSS.

 

 

 

 

@import '~office-ui-fabric-react/dist/sass/References.scss';
.reactFormik{
  .btnsForm {
    background-color: "[theme:themePrimary, default:#0078d7]";
    border-color: "[theme: themePrimary, default: #0078d7]";
    color: "[theme:white, default:white]" ;
    margin-left: 10px;
    margin-top: 10px;
  }
  .customErrorMeesage{
    color: var(--red-color);
    font-size: 10px;
    font-family: 'Light';
    padding: 2px;
  }
  .lblForm{
  font-size: 15px;
  margin:  5px 0px 5px 0px;
  }
}

 

 

 

 

Now serve the application using the below command,

 

gulp serve

 

Now test the webpart in SharePoint-SiteURL + /_layouts/15/workbench.aspx.

 

Output

 

SPFx-react-formik.gif

 

 

Find the full source code here.

 

Summary

In this article, we have seen how to implement react formik library in SPFx.

I hope this helps.

Sharing is caring!!

 

 

 

4 Comments
New Contributor

 Hi @ChandaniPrajapati ,

It is amazing article.

Senior Member

Thanks, @Dipen Shah 

Senior Member

Hi @ChandaniPrajapati ,

Thanks for the reference article.

Please let me know how can I resolve below errors with Yup.

Error - [tsc] node_modules/yup/lib/array.d.ts(2,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/array.d.ts(2,96): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/array.d.ts(3,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/array.d.ts(3,23): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/array.d.ts(3,28): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/boolean.d.ts(2,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/boolean.d.ts(2,34): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/boolean.d.ts(3,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/boolean.d.ts(3,50): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/boolean.d.ts(4,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/boolean.d.ts(4,30): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/date.d.ts(3,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/date.d.ts(3,39): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/date.d.ts(4,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/date.d.ts(4,41): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/index.d.ts(15,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/index.d.ts(15,38): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/index.d.ts(25,1): error TS1128: Declaration or statement expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/index.d.ts(25,13): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/index.d.ts(28,1): error TS1128: Declaration or statement expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/index.d.ts(28,13): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/index.d.ts(28,87): error TS1109: Expression expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/index.d.ts(28,94): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/Lazy.d.ts(1,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/Lazy.d.ts(1,48): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/Lazy.d.ts(2,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/Lazy.d.ts(2,37): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/Lazy.d.ts(3,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/Lazy.d.ts(3,45): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/mixed.d.ts(1,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/mixed.d.ts(1,34): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/mixed.d.ts(3,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/mixed.d.ts(3,30): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/number.d.ts(2,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/number.d.ts(2,48): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/number.d.ts(3,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/number.d.ts(3,23): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/number.d.ts(3,28): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/number.d.ts(4,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/number.d.ts(4,41): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/object.d.ts(3,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/object.d.ts(3,43): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/object.d.ts(4,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/object.d.ts(4,23): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/object.d.ts(4,28): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/Reference.d.ts(1,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/Reference.d.ts(1,43): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/schema.d.ts(4,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/schema.d.ts(4,37): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/string.d.ts(2,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/string.d.ts(2,23): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/string.d.ts(2,28): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/string.d.ts(3,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/string.d.ts(3,48): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/string.d.ts(4,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/string.d.ts(4,41): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/types.d.ts(1,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/types.d.ts(1,32): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/types.d.ts(2,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/types.d.ts(2,18): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/types.d.ts(2,23): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/util/createValidation.d.ts(4,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/util/createValidation.d.ts(4,32): error TS1005: ';' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/util/isSchema.d.ts(1,13): error TS1005: '=' expected.
[10:50:04] Error - [tsc] node_modules/yup/lib/util/isSchema.d.ts(1,33): error TS1005: ';' expected.

Senior Member

Hi @PraveenM,

Can you please check your yup version with my GitHub source code in the package.json file?

Thanks.

%3CLINGO-SUB%20id%3D%22lingo-sub-2386945%22%20slang%3D%22en-US%22%3ESPFx%20webpart%20form%20validation%20using%20React%20Formik%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2386945%22%20slang%3D%22en-US%22%3E%3CH2%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464105708%22%20id%3D%22toc-hId--464128709%22%3EIntroduction%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFormik%20is%20the%20world's%20most%20popular%20open-source%20form%20library%20for%20React%20and%20React%20Native.%20We%20can%20also%20use%20this%20library%20in%20our%20SPFx%20web%20part%20as%20well%20to%20manage%20form%20validations.%20Using%20this%20library%20we%20don't%20have%20to%20write%20custom%20validations.%20so%20let's%20start%20step-by-step%20implementation.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226455766%22%20id%3D%22toc-hId-226432765%22%3EWhat%20is%20formik%3F%3C%2FH3%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFormik%20is%20a%20small%20library%20that%20helps%20us%20with%20the%20these%20parts%3A%20Getting%20values%20in%20and%20out%20of%20form%20state.%20Validation%20and%20error%20messages.%20Handling%20form%20submission.%3C%2FP%3E%0A%3CP%3EFormik%20is%20designed%20to%20manage%20forms%20with%20complex%20validation%20with%20ease.%3C%2FP%3E%0A%3CP%3EFormik%20supports%20synchronous%20and%20asynchronous%20form-level%20and%20field-level%20validation.%3C%2FP%3E%0A%3CP%3EFurthermore%2C%20it%20comes%20with%20baked-in%20support%20for%20schema-based%20form-level%20validation%20through%20Yup.%3C%2FP%3E%0A%3CP%3EFor%20more%20details%20about%20Fromik%20refer%20to%20the%20below%20articles%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E%3CA%20title%3D%22Formik%20official%20documentation%22%20href%3D%22https%3A%2F%2Fformik.org%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EFormik%20official%20documentation%3C%2FA%3E%26nbsp%3B%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E%3CA%20title%3D%22Manage%20Forms%20In%20React%20With%20Formik%22%20href%3D%22https%3A%2F%2Fwww.c-sharpcorner.com%2Farticle%2Fmanage-forms-in-react-with-formik%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EManage%20Forms%20In%20React%20With%20Formik%3C%2FA%3E%26nbsp%3B%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E%3CA%20title%3D%22Formik%20validation%20Schema%22%20href%3D%22https%3A%2F%2Fformik.org%2Fdocs%2Fguides%2Fvalidation%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EFormik%20validation%20Schema%3C%2FA%3E%26nbsp%3B%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215952662%22%20id%3D%22toc-hId-215929661%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591501801%22%20id%3D%22toc-hId--1591524802%22%3ESharePoint%20List%20Structure%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ECreate%20a%20list%20called%26nbsp%3B%3CSTRONG%3ETasks%26nbsp%3B%3C%2FSTRONG%3Ewith%20below%20fields%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CTABLE%20style%3D%22width%3A%20100%25%3B%22%20border%3D%221%22%20width%3D%22100%25%22%3E%0A%3CTBODY%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3E%3CSTRONG%3EField%20Name(Internal%20name)%3C%2FSTRONG%3E%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3E%3CSTRONG%3EField%20Type%3C%2FSTRONG%3E%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3ETitle%20(default)%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3ESingle%20line%20of%20text%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3EStartDate%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3E%3CP%3EDate%20and%20Time%20(Date%20only)%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3EEndDate%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3EDate%20and%20Time%20(Date%20only)%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3EProjectName%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3ESingle%20line%20of%20text%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3ETaskDetails%3C%2FTD%3E%0A%3CTD%20width%3D%2250%25%22%20height%3D%2227px%22%3EMultiple%20lines%20of%20text%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FTBODY%3E%0A%3C%2FTABLE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAfter%20the%20creation%20of%20the%20list%2C%20we%20will%20start%20to%20create%20the%20SPFx%20web%20part.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-896011032%22%20id%3D%22toc-hId-895988031%22%3EFormik%20implementation%20with%20SPFx%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOpen%20a%20command%20prompt%3CBR%20%2F%3EMove%20to%20the%20path%20where%20you%20want%20to%20create%20a%20project%3CBR%20%2F%3ECreate%20a%20project%20directory%20using%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Emd%20react-formik%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EMove%20to%20the%20above-created%20directory%20using%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Ecd%20react-formik%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20execute%20the%20below%20command%20to%20create%20an%20SPFx%20solution%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3E%26nbsp%3Byo%20%40microsoft%2Fsharepoint%20%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20will%20ask%20some%20questions%2C%20as%20shown%20below%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Project%20Setup.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F283850iDC7320A79F49D015%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Project%20Setup.png%22%20alt%3D%22Project%20Setup.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAfter%20a%20successful%20installation%2C%20we%20can%20open%20a%20project%20in%20any%20source%20code%20tool.%20Here%2C%20I%20am%20using%20the%20VS%20code%2C%20so%20I%20will%20execute%20the%20command%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Ecode%20.%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20we%20will%20install%20the%20following%20packages%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Enpm%20i%20formik%3CBR%20%2F%3Enpm%20i%20yup%3CBR%20%2F%3Enpm%20i%20%40pnp%2Fspfx-controls-react%3CBR%20%2F%3Enpm%20i%20%40microsoft%2Fsp-dialog%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20the%20end%2C%20our%20output%20will%20be%20like%20this%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Output.png%22%20style%3D%22width%3A%20844px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F283854iF3FA39A2B052AAF5%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Output.png%22%20alt%3D%22Output.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAfter%20the%20successful%20installation%2C%20we%20will%20start%20our%20form%20implementation.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E1.%20Create%20below%20files%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%3CEM%3EI%7Bwebpartname%7DState.ts%3C%2FEM%3E%20inside%20%3CSTRONG%3Esrc%2Fwebparts%2FreactFormik%2Fcomponents%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%3CEM%3ESPService.ts%3C%2FEM%3E%20file%20inside%20%3CSTRONG%3Esrc%2Fwebparts%2Fshared%2Fservice%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3EIn%20the%20end%2C%20our%20structure%20will%20be%20looks%20like%20this%2C%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Project%20Structure.png%22%20style%3D%22width%3A%20347px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F283851i147B68545317BE61%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Project%20Structure.png%22%20alt%3D%22Project%20Structure.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E2.%20Create%20a%20state%20interface%20as%20below%20inside%26nbsp%3B%3CSTRONG%3EIReactFormikState.ts.%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eexport%20interface%20IReactFormikState%20%7B%0A%20%20projectName%3F%3A%20string%3B%0A%20%20startDate%3F%3A%20any%3B%0A%20%20endDate%3F%3A%20any%3B%0A%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E3.%20Create%20a%20method%20to%20create%20a%20task%20inside%20%3CSTRONG%3ESPService.ts.%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20%22%40pnp%2Fsp%2Fwebs%22%3B%0Aimport%20%22%40pnp%2Fsp%2Flists%22%3B%0Aimport%20%22%40pnp%2Fsp%2Fitems%22%3B%0Aimport%20%22%40pnp%2Fsp%2Fwebs%22%3B%0Aimport%20%22%40pnp%2Fsp%2Fsite-users%2Fweb%22%3B%0Aimport%20%7B%20Web%20%7D%20from%20%22%40pnp%2Fsp%2Fwebs%22%3B%0A%0Aexport%20class%20SPService%20%7B%0A%0A%20%20%20%20private%20web%3B%0A%0A%20%20%20%20constructor(url%3A%20string)%20%7B%0A%20%20%20%20%20%20%20%20this.web%20%3D%20Web(url)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20public%20async%20createTask(listName%3A%20string%2C%20body%3A%20any)%20%7B%0A%20%20%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20let%20createdItem%20%3D%20await%20this.web.lists%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.getByTitle(listName)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.items%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.add(body)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20createdItem%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20catch%20(err)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Promise.reject(err)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E4.%20Move%20to%20the%26nbsp%3B%3CSTRONG%3EReactFormikWebPart.ts%3C%2FSTRONG%3E.%20In%20this%2C%20we%20will%20pass%20the%20current%20SP%20context%20and%20read%20site%20URL%20from%20user.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20*%20as%20React%20from%20'react'%3B%0Aimport%20*%20as%20ReactDom%20from%20'react-dom'%3B%0Aimport%20%7B%20Version%20%7D%20from%20'%40microsoft%2Fsp-core-library'%3B%0Aimport%20%7B%0A%20%20IPropertyPaneConfiguration%2C%0A%20%20PropertyPaneTextField%0A%7D%20from%20'%40microsoft%2Fsp-property-pane'%3B%0Aimport%20%7B%20BaseClientSideWebPart%20%7D%20from%20'%40microsoft%2Fsp-webpart-base'%3B%0A%0Aimport%20*%20as%20strings%20from%20'ReactFormikWebPartStrings'%3B%0Aimport%20ReactFormik%20from%20'.%2Fcomponents%2FReactFormik'%3B%0Aimport%20%7B%20IReactFormikProps%20%7D%20from%20'.%2Fcomponents%2FIReactFormikProps'%3B%0Aimport%20%7B%20sp%20%7D%20from%20%22%40pnp%2Fsp%2Fpresets%2Fall%22%3B%0A%0Aexport%20interface%20IReactFormikWebPartProps%20%7B%0A%20%20description%3A%20string%3B%0A%20%20siteUrl%3A%20string%3B%0A%7D%0A%0Aexport%20default%20class%20ReactFormikWebPart%20extends%20BaseClientSideWebPart%3CIREACTFORMIKWEBPARTPROPS%3E%20%7B%0A%0A%20%20protected%20onInit()%3A%20Promise%3CVOID%3E%20%7B%0A%0A%20%20%20%20return%20super.onInit().then(_%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20sp.setup(%7B%0A%20%20%20%20%20%20%20%20spfxContext%3A%20this.context%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D%0A%0A%20%20public%20render()%3A%20void%20%7B%0A%20%20%20%20const%20element%3A%20React.ReactElement%3CIREACTFORMIKPROPS%3E%20%3D%20React.createElement(%0A%20%20%20%20%20%20ReactFormik%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20description%3A%20this.properties.description%2C%0A%20%20%20%20%20%20%20%20context%3A%20this.context%2C%0A%20%20%20%20%20%20%20%20siteUrl%3A%20this.properties.siteUrl%20%3F%20this.properties.siteUrl%20%3A%20this.context.pageContext.web.absoluteUrl%0A%20%20%20%20%20%20%7D%0A%20%20%20%20)%3B%0A%0A%20%20%20%20ReactDom.render(element%2C%20this.domElement)%3B%0A%20%20%7D%0A%0A%20%20protected%20onDispose()%3A%20void%20%7B%0A%20%20%20%20ReactDom.unmountComponentAtNode(this.domElement)%3B%0A%20%20%7D%0A%0A%20%20protected%20get%20dataVersion()%3A%20Version%20%7B%0A%20%20%20%20return%20Version.parse('1.0')%3B%0A%20%20%7D%0A%0A%20%20protected%20getPropertyPaneConfiguration()%3A%20IPropertyPaneConfiguration%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20pages%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20header%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20description%3A%20strings.PropertyPaneDescription%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20groups%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20groupName%3A%20strings.BasicGroupName%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20groupFields%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20PropertyPaneTextField('description'%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20strings.DescriptionFieldLabel%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20PropertyPaneTextField('siteUrl'%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20strings.SiteUrlFieldLabel%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%7D%0A%3C%2FIREACTFORMIKPROPS%3E%3C%2FVOID%3E%3C%2FIREACTFORMIKWEBPARTPROPS%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E5.%20Move%20to%20the%26nbsp%3B%3CSTRONG%3EReactFormik.tsx%3C%2FSTRONG%3E%20file%20to%20render%20form%20and%20validations%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%3CSTRONG%3Eyup%20syntaxs%3A%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E1.%20For%20string%3A%26nbsp%3Byup.string().required('Required')%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E2.%20For%20date%3A%26nbsp%3Byup.date().required('Required').nullable()%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%3CSTRONG%3ERelated%20to%20Formik%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E1.%20Fromik%20has%20its%20own%20handleReset%20and%20handleSubmit%20method%20so%20we%20don%20not%20have%20to%20manage%20manually%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E2.%20We%20have%20to%20set%20state%20value%20and%20error%20message%20from%20control%20so%20for%20that%20I%20have%20created%20a%20common%20method%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E1.%20In%26nbsp%3Bthe%20constructor%2C%20we%20will%20set%20the%20current%20SP%20context%2C%20bind%20the%20service%20and%20required%20methods%20and%20initialize%20the%20states.%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E2.%20Create%26nbsp%3BcreateRecord()%20to%20create%20task%20list%20item%20using%20SPService.%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E3.%20In%20the%20render()%2C%20first%20we%20will%20add%20all%20the%20controls%20like%20date%20picker%2C%20text%20field%2C%20people%20picker%2C%20and%20dropdown%2C%20etc%20inside%20%3CSTRONG%3E%3CFORMIK%3E%3C%2FFORMIK%3E%3C%2FSTRONG%3E.%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%26nbsp%3B%20%26nbsp%3B%20then%20We%20will%20set%20properties%20as%20below%2C%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%26nbsp%3B%20%26nbsp%3B%26nbsp%3B%3CSTRONG%3EinitialValues%3C%2FSTRONG%3E%20-%20This%20is%20one%20type%20o%20state%20at%20here%20we%20will%20set%20empty%20or%20null%20or%20undefined%20as%20an%20initial%20level.%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%26nbsp%3B%20%26nbsp%3B%26nbsp%3B%3CSTRONG%3EvalidationSchema%3C%2FSTRONG%3E%20-%20At%20here%20we%20will%20do%20validations%20using%20%3CSTRONG%3Eyup%3C%2FSTRONG%3E.%20so%20for%20this%2C%20I%20am%20creating%20one%20const%20and%20wills%20et%20this%20constant%20in%20this%20prop.%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%26nbsp%3B%20%26nbsp%3B%20%3CSTRONG%3EonSubmit%3C%2FSTRONG%3E%20-%20At%20here%20we%20will%20call%20the%20method%20to%20create%20a%20record%20in%20the%20SharePoint%20list%3C%2FP%3E%0A%3CP%20class%3D%22lia-align-justify%20lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20*%20as%20React%20from%20'react'%3B%0Aimport%20styles%20from%20'.%2FReactFormik.module.scss'%3B%0Aimport%20%7B%20IReactFormikProps%20%7D%20from%20'.%2FIReactFormikProps'%3B%0Aimport%20%7B%20IReactFormikState%20%7D%20from%20'.%2FIReactFormikState'%3B%0Aimport%20%7B%20SPService%20%7D%20from%20'..%2F..%2Fshared%2Fservice%2FSPService'%3B%0Aimport%20%7B%20TextField%20%7D%20from%20'%40fluentui%2Freact%2Flib%2FTextField'%3B%0Aimport%20%7B%20Stack%2C%20%7D%20from%20'%40fluentui%2Freact%2Flib%2FStack'%3B%0Aimport%20%7B%20Formik%2C%20FormikProps%20%7D%20from%20'formik'%3B%0Aimport%20%7B%20Label%20%7D%20from%20'office-ui-fabric-react%2Flib%2FLabel'%3B%0Aimport%20*%20as%20yup%20from%20'yup'%3B%0Aimport%20%7B%20PeoplePicker%2C%20PrincipalType%20%7D%20from%20%22%40pnp%2Fspfx-controls-react%2Flib%2FPeoplePicker%22%3B%0Aimport%20%7B%20DatePicker%2C%20Dropdown%2C%20mergeStyleSets%2C%20PrimaryButton%2C%20IIconProps%20%7D%20from%20'office-ui-fabric-react'%3B%0Aimport%20%7B%20sp%20%7D%20from%20'%40pnp%2Fsp'%3B%0Aimport%20%7B%20Dialog%20%7D%20from%20'%40microsoft%2Fsp-dialog'%3B%0A%0Aconst%20controlClass%20%3D%20mergeStyleSets(%7B%0A%20%20control%3A%20%7B%0A%20%20%20%20margin%3A%20'0%200%2015px%200'%2C%0A%20%20%20%20maxWidth%3A%20'300px'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20class%20ReactFormik%20extends%20React.Component%3CIREACTFORMIKPROPS%3E%20%7B%0A%0A%20%20private%20cancelIcon%3A%20IIconProps%20%3D%20%7B%20iconName%3A%20'Cancel'%20%7D%3B%0A%20%20private%20saveIcon%3A%20IIconProps%20%3D%20%7B%20iconName%3A%20'Save'%20%7D%3B%0A%20%20private%20_services%3A%20SPService%20%3D%20null%3B%0A%0A%20%20constructor(props%3A%20Readonly%3CIREACTFORMIKPROPS%3E)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20startDate%3A%20null%2C%0A%20%20%20%20%20%20endDate%3A%20null%0A%20%20%20%20%7D%0A%20%20%20%20sp.setup(%7B%0A%20%20%20%20%20%20spfxContext%3A%20this.props.context%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20this._services%20%3D%20new%20SPService(this.props.siteUrl)%3B%0A%20%20%20%20this.createRecord%20%3D%20this.createRecord.bind(this)%3B%0A%20%20%7D%0A%0A%20%20%2F**%20set%20field%20value%20and%20error%20message%20for%20all%20the%20fields%20*%2F%0A%20%20private%20getFieldProps%20%3D%20(formik%3A%20FormikProps%3CANY%3E%2C%20field%3A%20string)%20%3D%26gt%3B%20%7B%0A%20%20%20%20return%20%7B%20...formik.getFieldProps(field)%2C%20errorMessage%3A%20formik.errors%5Bfield%5D%20as%20string%20%7D%0A%20%20%7D%0A%0A%20%20%2F**%20create%20record%20in%20sharepoint%20list%20*%2F%0A%20%20public%20async%20createRecord(record%3A%20any)%20%7B%0A%20%20%20%20let%20item%20%3D%20await%20this._services.createTask(%22Tasks%22%2C%20%7B%0A%20%20%20%20%20%20Title%3A%20record.name%2C%0A%20%20%20%20%20%20TaskDetails%3A%20record.details%2C%0A%20%20%20%20%20%20StartDate%3A%20record.startDate%2C%0A%20%20%20%20%20%20EndDate%3A%20new%20Date(record.endDate)%2C%0A%20%20%20%20%20%20ProjectName%3A%20record.projectName%2C%0A%20%20%20%20%7D).then((data)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20Dialog.alert(%22Record%20inseterd%20successfully%20!!!%22)%3B%0A%20%20%20%20%20%20return%20data%3B%0A%20%20%20%20%7D).catch((err)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20console.error(err)%3B%0A%20%20%20%20%20%20throw%20err%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D%0A%0A%20%20public%20render()%3A%20React.ReactElement%3CIREACTFORMIKPROPS%3E%20%7B%0A%20%20%20%20%2F**%20validations%20*%2F%0A%20%20%20%20const%20validate%20%3D%20yup.object().shape(%7B%0A%20%20%20%20%20%20name%3A%20yup.string().required('Task%20name%20is%20required')%2C%0A%20%20%20%20%20%20details%3A%20yup.string()%0A%20%20%20%20%20%20%20%20.min('15'%2C%20'Minimum%20required%2015%20characters')%0A%20%20%20%20%20%20%20%20.required('Task%20detail%20is%20required')%2C%0A%20%20%20%20%20%20projectName%3A%20yup.string().required('Please%20select%20a%20project')%2C%0A%20%20%20%20%20%20startDate%3A%20yup.date().required('Please%20select%20a%20start%20date').nullable()%2C%0A%20%20%20%20%20%20endDate%3A%20yup.date().required('Please%20select%20a%20end%20date').nullable()%0A%20%20%20%20%7D)%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CFORMIK%20initialvalues%3D%22%7B%7B%22%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.log('SUCCESS!!%20%3A-)%5Cn%5Cn'%20%2B%20JSON.stringify(values%2C%20null%2C%204))%3B%0A%20%20%20%20%20%20%20%20%20%20this.createRecord(values).then(response%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20helpers.resetForm()%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%26gt%3B%0A%20%20%20%20%20%20%20%20%7B%20formik%20%3D%26gt%3B%20(%0A%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.reactFormik%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CSTACK%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CLABEL%20classname%3D%22%7Bstyles.lblForm%7D%22%3ECurrent%20User%3C%2FLABEL%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CPEOPLEPICKER%20context%3D%22%7Bthis.props.context%22%20as%3D%22%22%20any%3D%22%22%3E%3C%2FPEOPLEPICKER%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CLABEL%20classname%3D%22%7Bstyles.lblForm%7D%22%3ETask%20Name%3C%2FLABEL%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CTEXTFIELD%3E%3C%2FTEXTFIELD%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CLABEL%20classname%3D%22%7Bstyles.lblForm%7D%22%3EProject%20Name%3C%2FLABEL%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDROPDOWN%20options%3D%22%7B%22%3E%20%7B%20formik.setFieldValue('projectName'%2C%20option.key.toString())%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CLABEL%20classname%3D%22%7Bstyles.lblForm%7D%22%3EStart%20Date%3C%2FLABEL%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDATEPICKER%20classname%3D%22%7BcontrolClass.control%7D%22%20id%3D%22startDate%22%20value%3D%22%7Bformik.values.startDate%7D%22%20textfield%3D%22%7B%7B%22%20...this.getfieldprops%3D%22%22%3E%20formik.setFieldValue('startDate'%2C%20date)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CLABEL%20classname%3D%22%7Bstyles.lblForm%7D%22%3EEnd%20Date%3C%2FLABEL%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDATEPICKER%20classname%3D%22%7BcontrolClass.control%7D%22%20id%3D%22endDate%22%20value%3D%22%7Bformik.values.endDate%7D%22%20textfield%3D%22%7B%7B%22%20...this.getfieldprops%3D%22%22%3E%20formik.setFieldValue('endDate'%2C%20date)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CLABEL%20classname%3D%22%7Bstyles.lblForm%7D%22%3ETask%20Details%3C%2FLABEL%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CTEXTFIELD%20multiline%3D%22%22%20rows%3D%22%7B6%7D%22%3E%3C%2FTEXTFIELD%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FDATEPICKER%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CPRIMARYBUTTON%20type%3D%22submit%22%20text%3D%22Save%22%20iconprops%3D%22%7Bthis.saveIcon%7D%22%20classname%3D%22%7Bstyles.btnsForm%7D%22%20onclick%3D%22%7Bformik.handleSubmit%22%20as%3D%22%22%20any%3D%22%22%3E%3C%2FPRIMARYBUTTON%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CPRIMARYBUTTON%20text%3D%22Cancel%22%20iconprops%3D%22%7Bthis.cancelIcon%7D%22%20classname%3D%22%7Bstyles.btnsForm%7D%22%20onclick%3D%22%7Bformik.handleReset%7D%22%3E%3C%2FPRIMARYBUTTON%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FDATEPICKER%3E%3C%2FDROPDOWN%3E%3C%2FSTACK%3E%3C%2FDIV%3E%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%3C%2FFORMIK%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3C%2FIREACTFORMIKPROPS%3E%3C%2FANY%3E%3C%2FIREACTFORMIKPROPS%3E%3C%2FIREACTFORMIKPROPS%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E6.%20Move%20to%20the%26nbsp%3B%3CSTRONG%3EReactFormik.module.scss%3C%2FSTRONG%3E%20file%20to%20add%20some%20relaetd%20CSS.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-css%22%3E%3CCODE%3E%40import%20'~office-ui-fabric-react%2Fdist%2Fsass%2FReferences.scss'%3B%0A.reactFormik%7B%0A%20%20.btnsForm%20%7B%0A%20%20%20%20background-color%3A%20%22%5Btheme%3AthemePrimary%2C%20default%3A%230078d7%5D%22%3B%0A%20%20%20%20border-color%3A%20%22%5Btheme%3A%20themePrimary%2C%20default%3A%20%230078d7%5D%22%3B%0A%20%20%20%20color%3A%20%22%5Btheme%3Awhite%2C%20default%3Awhite%5D%22%20%3B%0A%20%20%20%20margin-left%3A%2010px%3B%0A%20%20%20%20margin-top%3A%2010px%3B%0A%20%20%7D%0A%20%20.customErrorMeesage%7B%0A%20%20%20%20color%3A%20var(--red-color)%3B%0A%20%20%20%20font-size%3A%2010px%3B%0A%20%20%20%20font-family%3A%20'Light'%3B%0A%20%20%20%20padding%3A%202px%3B%0A%20%20%7D%0A%20%20.lblForm%7B%0A%20%20font-size%3A%2015px%3B%0A%20%20margin%3A%20%205px%200px%205px%200px%3B%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20serve%20the%20application%20using%20the%20below%20command%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Egulp%20serve%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20test%20the%20webpart%20in%20SharePoint-SiteURL%20%2B%20%2F_layouts%2F15%2Fworkbench.aspx.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911443431%22%20id%3D%22toc-hId--911466432%22%3EOutput%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22SPFx-react-formik.gif%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F283856iA4FABBEFE508862F%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22SPFx-react-formik.gif%22%20alt%3D%22SPFx-react-formik.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFind%20the%20full%20source%20code%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fchandaniprajapati%2Fspfx-react-formik%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3Ehere%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576069402%22%20id%3D%22toc-hId-1576046401%22%3ESummary%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FH2%3E%0A%3CP%3EIn%20this%20article%2C%20we%20have%20seen%20how%20to%20implement%20react%20formik%20library%20in%20SPFx.%3CBR%20%2F%3E%3CBR%20%2F%3EI%20hope%20this%20helps.%3CBR%20%2F%3E%3CBR%20%2F%3ESharing%20is%20caring!!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2386945%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20this%20article%2C%20we%20will%20see%20how%20to%20validate%20a%20form%20in%20the%20SPFx%20web%20part%20using%20React%20Formik%20library.%20For%20this%20we%20will%20create%20a%20simple%20Task%20form%20to%20create%20a%20task%20in%20list%20with%20required%20and%20minimum%20text%20length%20validations.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2386945%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EHow%20to%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EReact%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EReact%20Fromik%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESPFx%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESPFx%20webpart%20form%20validation%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2391991%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20form%20validation%20using%20React%20Formik%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2391991%22%20slang%3D%22en-US%22%3E%3CP%3E%26nbsp%3BHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F995474%22%20target%3D%22_blank%22%3E%40ChandaniPrajapati%3C%2FA%3E%26nbsp%3B%2C%3CBR%20%2F%3E%3CBR%20%2F%3EIt%20is%20amazing%20article.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2393120%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20form%20validation%20using%20React%20Formik%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2393120%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F144808%22%20target%3D%22_blank%22%3E%40Dipen%20Shah%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2481073%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20form%20validation%20using%20React%20Formik%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2481073%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F995474%22%20target%3D%22_blank%22%3E%40ChandaniPrajapati%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3EThanks%20for%20the%20reference%20article.%3C%2FP%3E%3CP%3EPlease%20let%20me%20know%20how%20can%20I%20resolve%20below%20errors%20with%20Yup.%3C%2FP%3E%3CP%3EError%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Farray.d.ts(2%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Farray.d.ts(2%2C96)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Farray.d.ts(3%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Farray.d.ts(3%2C23)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Farray.d.ts(3%2C28)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fboolean.d.ts(2%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fboolean.d.ts(2%2C34)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fboolean.d.ts(3%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fboolean.d.ts(3%2C50)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fboolean.d.ts(4%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fboolean.d.ts(4%2C30)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fdate.d.ts(3%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fdate.d.ts(3%2C39)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fdate.d.ts(4%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fdate.d.ts(4%2C41)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Findex.d.ts(15%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Findex.d.ts(15%2C38)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Findex.d.ts(25%2C1)%3A%20error%20TS1128%3A%20Declaration%20or%20statement%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Findex.d.ts(25%2C13)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Findex.d.ts(28%2C1)%3A%20error%20TS1128%3A%20Declaration%20or%20statement%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Findex.d.ts(28%2C13)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Findex.d.ts(28%2C87)%3A%20error%20TS1109%3A%20Expression%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Findex.d.ts(28%2C94)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2FLazy.d.ts(1%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2FLazy.d.ts(1%2C48)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2FLazy.d.ts(2%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2FLazy.d.ts(2%2C37)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2FLazy.d.ts(3%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2FLazy.d.ts(3%2C45)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fmixed.d.ts(1%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fmixed.d.ts(1%2C34)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fmixed.d.ts(3%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fmixed.d.ts(3%2C30)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fnumber.d.ts(2%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fnumber.d.ts(2%2C48)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fnumber.d.ts(3%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fnumber.d.ts(3%2C23)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fnumber.d.ts(3%2C28)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fnumber.d.ts(4%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fnumber.d.ts(4%2C41)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fobject.d.ts(3%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fobject.d.ts(3%2C43)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fobject.d.ts(4%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fobject.d.ts(4%2C23)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fobject.d.ts(4%2C28)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2FReference.d.ts(1%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2FReference.d.ts(1%2C43)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fschema.d.ts(4%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fschema.d.ts(4%2C37)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fstring.d.ts(2%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fstring.d.ts(2%2C23)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fstring.d.ts(2%2C28)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fstring.d.ts(3%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fstring.d.ts(3%2C48)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fstring.d.ts(4%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Fstring.d.ts(4%2C41)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Ftypes.d.ts(1%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Ftypes.d.ts(1%2C32)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Ftypes.d.ts(2%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Ftypes.d.ts(2%2C18)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Ftypes.d.ts(2%2C23)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Futil%2FcreateValidation.d.ts(4%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Futil%2FcreateValidation.d.ts(4%2C32)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Futil%2FisSchema.d.ts(1%2C13)%3A%20error%20TS1005%3A%20'%3D'%20expected.%3CBR%20%2F%3E%5B10%3A50%3A04%5D%20Error%20-%20%5Btsc%5D%20node_modules%2Fyup%2Flib%2Futil%2FisSchema.d.ts(1%2C33)%3A%20error%20TS1005%3A%20'%3B'%20expected.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2485362%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20webpart%20form%20validation%20using%20React%20Formik%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2485362%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F439606%22%20target%3D%22_blank%22%3E%40PraveenM%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3ECan%20you%20please%20check%20your%20yup%20version%20with%20my%20GitHub%20source%20code%20in%20the%20package.json%20file%3F%3C%2FP%3E%0A%3CP%3EThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Co-Authors
Version history
Last update:
‎May 26 2021 05:47 AM
Updated by:
www.000webhost.com