Zocatelli
Reputation: 338
resetForm() on Formik doesn't clear all fields
I'm building a form using ReactJS + Formik. Currently when I submit a form and use resetForm() to clean all inputs, it only works on a few of them. I have a JSON Schema like this:
initialValues={{
email: '',
name: '',
cpf: '',
telephone: '',
addresses: [
{
cep: '',
state: 'AC',
city: '',
neighborhood: '',
address: '',
number: '',
complement: '',
type: 0,
main: true
}
]
}}
There's this nested objected, all of the addresses objects do not reset when I'm submitting. I tried using a work around with setFieldValue('cep', '') but then I become unable to type on the field, because it sets it to an empty state all the time.
EDIT:
return (
<div className="container-add">
<div className="content-add">
{console.log('eita formik')}
<Link to="/list">
<button className="btn-voltar">Voltar</button>
</Link>
<h2 className="add-title-main">Editar Cliente</h2>
<Formik
enableReinitialize
initialValues={{
email: '',
name: '',
cpf: '',
telephone: ''
addresses: [
{
cep: '',
state: '',
city: '',
neighborhood: '',
address: '',
number: '',
complement: '',
type: 0,
main: true
}
]
}}
onSubmit={async (
values,
{ resetForm, props, setSubmitting, setFieldValue }
) => {
const validarCpf = require('validar-cpf');
const cpfValido = validarCpf(values.cpf);
//Valida o CPF
if (!cpfValido) {
Swal.fire('Oops...', 'O CPF informado é inválido!', 'error');
} else {
alert(JSON.stringify(values, null, 2));
try {
await api.post('/users', values);
Swal.fire('Sucesso!', 'Cliente cadastrado!', 'success');
resetForm();
setFieldValue('cep', '');
setFieldValue('city', '');
setFieldValue('neighborhood', '');
setFieldValue('address', '');
setFieldValue('number', '');
setFieldValue('complement', '');
} catch (error) {
Swal.fire('Oops...', error.response.data.error, 'error');
setSubmitting(false);
}
}
}}
validationSchema={Yup.object().shape({
name: Yup.string()
.required('Campo Obrigatório')
.min(8, 'Digite o nome completo'),
cpf: Yup.string()
.required('Campo Obrigatório')
.min(14, 'Digite o CPF completo'),
email: Yup.string()
.email('E-mail inválido')
.required('Campo Obrigatório'),
telephone: Yup.string()
.required('Campo Obrigatório')
.min(10, 'Digite um telefone válido'),
addresses: Yup.array().of(
Yup.object().shape({
cep: Yup.string()
.required('Campo Obrigatório')
.min(8, 'Digite o CEP completo'),
city: Yup.string()
.required('Campo Obrigatório')
.min(2, 'Digite o nome completo da cidade'),
neighborhood: Yup.string()
.required('Campo Obrigatório')
.min(2, 'Digite o nome completo do bairro'),
address: Yup.string()
.required('Campo Obrigatório')
.min(2, 'Digite o endereço completo'),
number: Yup.string().required('Campo Obrigatório')
})
)
})}
>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
handleSubmit,
setFieldValue
} = props;
return (
<form onSubmit={handleSubmit}>
{/* NOME */}
<h2 className="add-title">Dados do Cliente</h2>
<label htmlFor="name" style={{ display: 'block' }}>
Nome
</label>
<input
id="name"
placeholder=""
type="text"
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
className={
errors.name && touched.name
? 'text-input error'
: 'text-input'
}
/>
{errors.name && touched.name && (
<div className="input-feedback">{errors.name}</div>
)}
{/* CPF */}
<label htmlFor="cpf" style={{ display: 'block' }}>
CPF
</label>
<MaskedInput
mask={[
/[0-9]/,
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/
]}
id="cpf"
guide={false}
placeholder=""
type="text"
value={values.cpf}
onChange={handleChange}
onBlur={handleBlur}
className={
errors.cpf && touched.cpf
? 'text-input error'
: 'text-input'
}
/>
{errors.cpf && touched.cpf && (
<div className="input-feedback">{errors.cpf}</div>
)}
{/* EMAIL */}
<label htmlFor="email" style={{ display: 'block' }}>
Email
</label>
<input
id="email"
placeholder=""
type="text"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
className={
errors.email && touched.email
? 'text-input error'
: 'text-input'
}
/>
{errors.email && touched.email && (
<div className="input-feedback">{errors.email}</div>
)}
{/* TELEFONE */}
<label htmlFor="telephone" style={{ display: 'block' }}>
Telefone
</label>
<MaskedInput
mask={[
'(',
/[0-9]/,
/\d/,
')',
' ',
/\d/,
/\d/,
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/,
/\d/,
/\d/
]}
id="telephone"
placeholder=""
type="text"
guide={false}
value={values.telephone}
onChange={handleChange}
onBlur={handleBlur}
className={
errors.telephone && touched.telephone
? 'text-input error'
: 'text-input'
}
/>
{errors.telephone && touched.telephone && (
<div className="input-feedback">{errors.telephone}</div>
)}
<hr className="division"></hr>
<h2 className="add-subtitle">Endereço Principal</h2>
{/* CEP */}
<label htmlFor="cep" style={{ display: 'block' }}>
CEP
</label>
<MaskedInput
mask={[/[0-9]/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]}
guide={false}
id="cep"
placeholder=""
type="text"
name="addresses[0].cep"
value={values.cep}
onChange={handleChange}
onBlur={handleBlur}
className={
getIn(errors, 'addresses[0].cep') &&
getIn(touched, 'addresses[0].cep')
? 'text-input error'
: 'text-input'
}
/>
<ErrorMessage
component="div"
name="addresses[0].cep"
className="input-feedback"
/>
{/* Estado */}
<label htmlFor="state" style={{ display: 'block' }}>
Estado
</label>
<select
id="state"
placeholder=""
name="addresses[0].state"
value={values.state}
onChange={handleChange}
onBlur={handleBlur}
className={
getIn(errors, 'addresses[0].state') &&
getIn(touched, 'addresses[0].state')
? 'text-input error'
: 'text-input'
}
>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
<ErrorMessage
component="div"
name="addresses[0].state"
className="input-feedback"
/>
{/* Cidade */}
<label htmlFor="city" style={{ display: 'block' }}>
Cidade
</label>
<input
id="city"
placeholder=""
type="text"
name="addresses[0].city"
value={values.city}
onChange={handleChange}
onBlur={handleBlur}
className={
getIn(errors, 'addresses[0].city') &&
getIn(touched, 'addresses[0].city')
? 'text-input error'
: 'text-input'
}
/>
<ErrorMessage
component="div"
name="addresses[0].city"
className="input-feedback"
/>
{/* Bairro */}
<label htmlFor="neighborhood" style={{ display: 'block' }}>
Bairro
</label>
<input
id="neighborhood"
placeholder=""
type="text"
name="addresses[0].neighborhood"
value={values.neighborhood}
onChange={handleChange}
onBlur={handleBlur}
className={
getIn(errors, 'addresses[0].neighborhood') &&
getIn(touched, 'addresses[0].neighborhood')
? 'text-input error'
: 'text-input'
}
/>
<ErrorMessage
component="div"
name="addresses[0].neighborhood"
className="input-feedback"
/>
{/* Endereço */}
<label htmlFor="address" style={{ display: 'block' }}>
Endereço
</label>
<input
id="address"
placeholder=""
type="text"
name="addresses[0].address"
value={values.address}
onChange={handleChange}
onBlur={handleBlur}
className={
getIn(errors, 'addresses[0].address') &&
getIn(touched, 'addresses[0].address')
? 'text-input error'
: 'text-input'
}
/>
<ErrorMessage
component="div"
name="addresses[0].address"
className="input-feedback"
/>
{/* Número */}
<label htmlFor="number" style={{ display: 'block' }}>
Número
</label>
<input
id="number"
placeholder=""
type="text"
name="addresses[0].number"
value={values.number}
onChange={handleChange}
onBlur={handleBlur}
className={
getIn(errors, 'addresses[0].number') &&
getIn(touched, 'addresses[0].number')
? 'text-input error'
: 'text-input'
}
/>
<ErrorMessage
component="div"
name="addresses[0].number"
className="input-feedback"
/>
{/* Complemento */}
<label htmlFor="complement" style={{ display: 'block' }}>
Complemento
</label>
<input
id="complement"
placeholder=""
type="text"
name="addresses[0].complement"
value={values.complement}
onChange={handleChange}
onBlur={handleBlur}
className={
getIn(errors, 'addresses[0].complement') &&
getIn(touched, 'addresses[0].complement')
? 'text-input error'
: 'text-input'
}
/>
<ErrorMessage
component="div"
name="addresses[0].complement"
className="input-feedback"
/>
{/* Tipo */}
<label htmlFor="type" style={{ display: 'block' }}>
Tipo do Endereço
</label>
<div className="radio">
<label name="" className="radio-label">
<Field
type="radio"
name="addresses[0].type"
value="0"
checked={values.addresses[0].type === '0'}
onChange={() => setFieldValue('addresses[0].type', '0')}
/>
Comercial
</label>
</div>
<div className="radio">
<label className="radio-label">
<input
type="radio"
name="addresses[0].type"
value="1"
checked={values.addresses[0].type === '1'}
onChange={() => setFieldValue('addresses[0].type', '1')}
/>
Residencial
</label>
</div>
<div className="radio">
<label className="radio-label">
<input
type="radio"
value="2"
checked={values.addresses[0].type === '2'}
onChange={() => setFieldValue('addresses[0].type', '2')}
/>
Rural
</label>
</div>
<div className="radio">
<label className="radio-label">
<input
type="radio"
name="addresses[0].type"
value="3"
checked={values.addresses[0].type === '3'}
onChange={() => setFieldValue('addresses[0].type', '3')}
/>
Casa de Praia
</label>
</div>
<div className="end-secundario"></div>
<button type="" disabled={isSubmitting}>
+
</button>
<button type="submit" disabled={isSubmitting}>
Cadastrar
</button>
</form>
);
}}
</Formik>
</div>
</div>
);
}
Upvotes: 1
Views: 8314
Answers (1)
Michał
Reputation: 905
<MaskedInput
...
name="addresses[0].cep"
value={values.cep}
onChange={handleChange}
/>
value should be values.addressess[0].cep instead of values.cep
Upvotes: 2
Related Questions
- Formik clear form on button reset
- The resetForm method of Formik does not work as expected
- react js Formik <Form/> resetForm() is not working
- Clear Formik field with initial value React
- Formik reset form, not to the initial state but a new one
- Resetting a Formik field array to an empty array prior to form submission
- ReactJS Formik, Why is the form not clearing?
- How to manually reset Formik field to null (REACT)
- How to reset / empty form after submit in Formik
- Formik Field not clearing after form submit