Привет. Я пытаюсь создать страницу регистрации. Итак, enter code here вот код для создания страницы регистрации:
import React from "react";
import { Formik } from "formik";
import { connect } from "react-redux";
import { Form, Col, Button } from "react-bootstrap";
import { injectIntl } from "react-intl";
import * as yup from "yup";
import axios from 'axios';
import API from "../../../_metronic/utils/api";
import * as auth from "../../store/ducks/auth.duck";
const schema = yup.object({
firstName: yup.string().required("Required Field"),
lastName: yup.string().required("Required Field"),
companyName: yup.string().required("Required Field"),
companyType: yup.string().required("Required Field"),
noOfEmployees: yup.string().required("Required Field"),
phoneNumber: yup.string().required("Required Field"),
email: yup.string().required("Required Field"),
password: yup.string().required("Required Field"),
companyEmail: yup.string().required("Required Field"),
companyContact: yup.string().required("Required Field")
// terms: yup.bool().required("Required Field")
});
function Registration(props) {
return (
<>
<div>
<h3 style={{ textAlign: "center" }}>Signup as a Brand!</h3>
<br />
<br />
</div>
<Formik
validationSchema={schema}
onSubmit={async (values, actions) => {
// actions.setFieldErrors({'firstName':'heelo'})
const formData = new FormData();
formData.append("firstName", values.firstName);
formData.append("lastName", values.lastName);
formData.append("companyName", values.companyName);
formData.append("companyType", values.companyType);
formData.append("noOfEmployees",values.noOfEmployees);
formData.append("contact", values.phoneNumber);
formData.append("email", values.email);
formData.append("password", values.password);
formData.append("companyEmail",values.companyEmail);
formData.append("companyContact",values.companyContact);
axios.post('http://localhost:4000/api/v2/auth/companies/sign_up',formData)
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err.response);
err.response.data.errors.map(data=>{
let field=data.param;
let msg=data.msg;
switch(field){
case 'firstName': actions.setFieldError("firstName",msg); break;
case 'lastName': actions.setFieldError("lastName",msg);break;
case 'email': actions.setFieldError("email",msg);break;
case 'contact': actions.setFieldError("phoneNumber",msg);break;
case ' companyName': actions.setFieldError("companyName",msg);break;
case 'companyType ': actions.setFieldError("companyType",msg);break;
case 'password': actions.setFieldError("password",msg);break;
case 'noOfEmployees': actions.setFieldError("noOfEmployees",msg);break;
case 'companyEmail': actions.setFieldError("companyEmail",msg);break;
case 'companyContact': actions.setFieldError("companyContact",msg);break;
default:break
}
})
})
}}
initialValues={{
firstName: "",
lastName: "",
companyName: "",
companyType: "",
noOfEmployees: "",
phoneNumber: "",
email: "",
password: "",
companyEmail: "",
companyContact: ""
}}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationFormik01">
<Form.Label>First Name</Form.Label>
<Form.Control
type="text"
placeholder="First Name"
name="firstName"
value={values.firstName}
onChange={handleChange}
isValid={touched.firstName && !errors.firstName}
isInvalid={Boolean(touched.firstName && errors.firstName)}
/>
<Form.Control.Feedback type="invalid">
{errors.firstName}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="6" controlId="validationFormik02">
<Form.Label>Last Name</Form.Label>
<Form.Control
type="text"
placeholder="Last Name"
name="lastName"
value={values.lastName}
onChange={handleChange}
isValid={touched.lastName && !errors.lastName}
isInvalid={Boolean(touched.lastName && errors.lastName)}
/>
<Form.Control.Feedback type="invalid">
{errors.lastName}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="12" controlId="validationFormik01">
<Form.Label>Phone Number</Form.Label>
<Form.Control
type="text"
placeholder="Phone Number"
name="phoneNumber"
value={values.phoneNumber}
onChange={handleChange}
isValid={touched.phoneNumber && !errors.phoneNumber}
isInvalid={Boolean(touched.phoneNumber && errors.phoneNumber)}
/>
<Form.Control.Feedback type="invalid">
{errors.phoneNumber}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="12" controlId="validationFormik02">
<Form.Label>Email</Form.Label>
<Form.Control
type="text"
placeholder="Email"
name="email"
value={values.email}
onChange={handleChange}
isValid={touched.email && !errors.email}
isInvalid={Boolean(touched.email && errors.email)}
/>
<Form.Control.Feedback type="invalid">
{errors.email}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="12" controlId="validationFormik02">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
name="password"
value={values.password}
onChange={handleChange}
isValid={touched.password && !errors.password}
isInvalid={Boolean(touched.password && errors.password)}
/>
<Form.Control.Feedback type="invalid">
{errors.password}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="12" controlId="validationFormik03">
<Form.Label>Company's Name</Form.Label>
<Form.Control
type="text"
placeholder="Company's Name"
name="companyName"
value={values.companyName}
onChange={handleChange}
isValid={touched.companyName && !errors.companyName}
isInvalid={Boolean(touched.companyName && errors.companyName)}
/>
<Form.Control.Feedback type="invalid">
{errors.companyName}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} controlId="companyType">
<Form.Label>Company's Type</Form.Label>
<Form.Control
as="select"
value={values.companyType}
onChange={handleChange}
isValid={touched.companyType && !errors.companyType}
isInvalid={Boolean(touched.companyType && errors.companyType)}
>
<option>Choose...</option>
<option>Brand</option>
<option>Agency</option>
</Form.Control>
<Form.Control.Feedback type="invalid">
{errors.companyType}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="noOfEmployees">
<Form.Label>Number of Employees</Form.Label>
<Form.Control
as="select"
value={values.noOfEmployees}
onChange={handleChange}
isValid={touched.noOfEmployees && !errors.noOfEmployees}
isInvalid={Boolean(
touched.noOfEmployees && errors.noOfEmployees
)}
>
<option>Choose...</option>
<option>1-25</option>
<option>25-50</option>
</Form.Control>
<Form.Control.Feedback type="invalid">
{errors.companyType}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationFormik01">
<Form.Label>Company's Email</Form.Label>
<Form.Control
type="text"
placeholder="Company's Email"
name="companyEmail"
value={values.companyEmail}
onChange={handleChange}
isValid={touched.companyEmail && !errors.companyEmail}
isInvalid={Boolean(
touched.companyEmail && errors.companyEmail
)}
/>
<Form.Control.Feedback type="invalid">
{errors.companyEmail}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="6" controlId="validationFormik02">
<Form.Label>Company's contact</Form.Label>
<Form.Control
type="text"
placeholder="Company's contact"
name="companyContact"
value={values.companyContact}
onChange={handleChange}
isValid={touched.companyContact && !errors.companyContact}
isInvalid={Boolean(
touched.companyContact && errors.companyContact
)}
/>
<Form.Control.Feedback type="invalid">
{errors.companyContact}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Button type="submit">Submit form</Button>
</Form>
)}
</Formik>
</>
);
}
export default injectIntl(connect(null, auth.actions)(Registration));
Теперь страница выглядит так:
Теперь, если я даю неверные данные, я получаю ошибки от бэкэнда и обрабатываю их правильно
Теперь, если я go и редактируйте любые поля, ошибки исчезают, а я не хочу: 
Может кто-нибудь помочь мне с этим.