Блог

Я реализовал проверку формы, используя пользовательский хук, где он отправляет ошибки в виде объектов для формирования в приведенном ниже формате.

 errors : {
    userEmail: {
        required: true
    }
}
  

И компонент формы, как показано ниже

 import React from 'react';

import { FormInput } from './../FormInput/FormInput.component';
import { useFormValidation } from './../../shared/utils/useFormValidation';
import { Button } from './../Button/Button.component';

import './SignIn.styles.css';

import FormFieldsData from './../../shared/data/form-fields';

const SignIn = () => {

    // FORM INITIAL STATE

    const formInitialState = {
        userEmail: '',
        userPassword: ''
    };

    // SETTING VALIDATION RULES FOR FORM FIELDS

    const fieldValidationRules = {
        userEmail: { required: true, isValidEmail: true },
        userPassword: { required: true}
    };

    // INITIALIZING FORM USING HOOK

    const [
        signInFormState,
        errors,
        isValid,
        handleInputChange,
        handleFormSubmit,
        handleBlur
    ] = useFormValidation(formInitialState, fieldValidationRules);

    console.log(errors.userEmail.required);

    const { userEmail, userPassword } = signInFormState;

    return(
        <div className = 'SignInSection'>

            <h1> Sign In here..!! </h1>

            <form onSubmit = {handleFormSubmit} >

                <FormInput 
                    {...FormFieldsData.userEmail}
                    value = {userEmail} 
                    clicked = {handleInputChange}
                    blur = {handleBlur} />

                    {/* Validation Error Message */}

                    

                <FormInput 
                    {...FormFieldsData.userPassword}
                    value = {userPassword}
                    clicked = {handleInputChange}
                    blur = {handleBlur} />
                
                <Button
                    type = 'submit'
                    btn_label = 'Login'
                    btn_size = 'sm'
                    disabled = {!isValid}
                    btn_bg = '#00ACEE'
                    btn_color = '#FFFFFF' />

                <Button
                    type = 'button'
                    btn_label = 'Cancel'
                    btn_size = 'sm'
                    btn_bg = '#4b4b4b'
                    btn_color = '#FFFFFF' />

            </form>

        </div>
    )
};

export { SignIn }
  

При попытке получить доступ к требуемому полю из объекта error для реализации сообщения о проверке я получаю следующую ошибку.

Пожалуйста, подскажите мне, как достичь этой функциональности?

;