SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/body #8

Merged
SavioCarvalhoMoraes merged 10 commits from feature/body into development 2023-01-16 22:24:50 +00:00
Conversation 0 Commits 10 Files Changed 9 +90 -138
1 changed files with 90 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 87696220e3 - Show all commits

228
src/components/FormInput/FormInput.tsx
View File

@ -1,9 +1,34 @@
import React from "react";
import { useFormik } from "formik";
import {
useFormik,
Formik,
Form,
Field,
ErrorMessage,
FormikHelpers,
} from "formik";
import * as Yup from "yup";
import styles from "./formInput.module.scss";
interface IFormikValues {
nome: string;
//email: string;
//cpf: string;
//nascimento: string;
//tel: string;
//instagram: string;
termos: boolean;
}
const FormInput = () => {
const initialValues = {
nome: "",
//email: "",
//cpf: "",
//nascimento: "",
//tel: "",
//instagram: "",
termos: false,
}; /*
const formik = useFormik({
initialValues: {
nome: "",
@ -13,151 +38,78 @@ const FormInput = () => {
tel: "",
instagram: "",
termos: false,
},
validationSchema: Yup.object({
nome: Yup.string()
.required("*Campo Obrigatório")
.test(
"is-full-name",
"Please enter both your first and last name",
function (value: any) {
const nameArr = value.split(" ");
return nameArr.length >= 2;
}
),
email: Yup.string().required("*Campo Obrigatório"),
cpf: Yup.string().required("*Campo Obrigatório"),
nascimento: Yup.string().required("*Campo Obrigatório"),
tel: Yup.string().required("*Campo Obrigatório"),
instagram: Yup.string().required("*Campo Obrigatório"),
termos: Yup.boolean().required("*").isTrue(),
}),
},*/
validationSchema: Yup.object({
nome: Yup.string()
.required("*Campo Obrigatório")
.test(
"is-full-name",
"Please enter both your first and last name",
function (value: any) {
const nameArr = value.split(" ");
return nameArr.length >= 2;
}
),
email: Yup.string().required("*Campo Obrigatório"),
cpf: Yup.string().required("*Campo Obrigatório"),
nascimento: Yup.string().required("*Campo Obrigatório"),
tel: Yup.string().required("*Campo Obrigatório"),
instagram: Yup.string().required("*Campo Obrigatório"),
termos: Yup.boolean().required("*").isTrue(),
}); /*
onSubmit: function (values) {
alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}.
Age: ${values.nascimento},${values.tel},${values.instagram}`);
},
});*/
const validacao = Yup.object().shape({
nome: Yup.string()
.required("*Campo Obrigatório")
.test(
"is-full-name",
"Please enter both your first and last name",
function (value: any) {
if (value === "" || value === undefined) {
return false;
} else {
const nameArr = value.split(" ");
return nameArr.length >= 2;
}
}
),
termos: Yup.boolean().required("*").isTrue(),
});
const handleFormikSubmit = (values: IFormikValues) => {
console.log(values);
};
return (
<div className={styles["form"]}>
<form onSubmit={formik.handleSubmit}>
<h2>Preencha o formulário</h2>
<ul className={styles["form-itens"]}>
<li className={styles["form-item"]}>
<div className={styles["textForm"]}>
<label>Nome</label>
{formik.touched.nome && formik.errors.nome && (
<span className={styles["errorFormik"]}>
{formik.errors.nome}
</span>
)}
<div>
<h2>Preencha o formulário</h2>
<Formik
onSubmit={handleFormikSubmit}
initialValues={initialValues}
validationSchema={validacao}
>
{({ errors, touched }) => (
<Form>
<div>
<label htmlFor="nome">Nome</label>
<Field
type="text"
id="nome"
name="nome"
className={errors.nome && touched.nome && "invalid"}
/>
<ErrorMessage component="span" name="nome" />
</div>
<input
id="nome"
type="text"
placeholder="Seu nome completo"
value={formik.values.nome}
onChange={formik.handleChange}
/>
</li>
<li className={styles["form-item"]}>
<div className={styles["textForm"]}>
<label>E-mail</label>
{formik.touched.email && formik.errors.email && (
<span className={styles["errorFormik"]}>
{formik.errors.email}
</span>
)}
<div>
<label htmlFor="check">termos</label>
<Field type="checkbox" id="check" name="termos" className="" />
</div>
<input
id="email"
type="text"
placeholder="Seu email"
value={formik.values.email}
onChange={formik.handleChange}
/>
</li>
<li className={styles["form-item"]}>
<div className={styles["textForm"]}>
<label>CPF</label>
{formik.touched.cpf && formik.errors.cpf && (
<span className={styles["errorFormik"]}>
{formik.errors.cpf}
</span>
)}
</div>
<input
id="cpf"
type="text"
placeholder="000.000.000-00"
value={formik.values.cpf}
onChange={formik.handleChange}
/>
</li>
<li className={styles["form-item"]}>
<div className={styles["textForm"]}>
<label>Data de Nascimento</label>
{formik.touched.nascimento && formik.errors.nascimento && (
<span className={styles["errorFormik"]}>
{formik.errors.nascimento}
</span>
)}
</div>
<input
id="nascimento"
type="text"
placeholder="00.00.00"
value={formik.values.nascimento}
onChange={formik.handleChange}
/>
</li>
<li className={styles["form-item"]}>
<div className={styles["textForm"]}>
<label>Telefone</label>
{formik.touched.tel && formik.errors.tel && (
<span className={styles["errorFormik"]}>
{formik.errors.tel}
</span>
)}
</div>
<input
id="tel"
type="text"
placeholder="(00)00000-0000"
value={formik.values.tel}
onChange={formik.handleChange}
/>
</li>
<li className={styles["form-item"]}>
<div className={styles["textForm"]}>
<label>Instagram</label>
{formik.touched.instagram && formik.errors.instagram && (
<span className={styles["errorFormik"]}>
{formik.errors.instagram}
</span>
)}
</div>
<input
id="instagram"
type="text"
placeholder="@seuuser"
value={formik.values.instagram}
onChange={formik.handleChange}
/>
</li>
<li>
{formik.touched.termos && formik.errors.termos && (
<span className={styles["errorFormik"]}>
{formik.errors.termos}
</span>
)}
<a href="/">Declaro que li e aceito</a>
<input type="checkbox" />
</li>
</ul>
<button type="submit">Cadastre-se</button>
</form>
<button type="submit">Cadastre-se</button>
</Form>
)}
</Formik>
</div>
);
};