I am new to React and formik and struggling to get my radio buttons to display in the browser. I think it is because the radio buttons are not defined as props in my formikcontrol function. How do I add it to the other props in my formikcontrol function? Please advise how to solve this issue. Thanks in advance
App.js:
import React from 'react';
import './App.css';
import FormikContainer from './components/FormikContainer';
import LoginForm from './components/LoginForm';
import Registrationform from './components/RegistrationForm';
function App() {
return (
<div>
<LoginForm />
<Registrationform />
</div>
);
}
export default App;
RegistrationForm:
import React from 'react';
import { Formik, Form } from 'formik';
import * as yup from 'yup';
import FormikControl from './FormikControl';
function Registrationform() {
const options = [
{ key: 'Email', value: 'emailmoc' },
{ key: 'Telephone', vlaue: 'telephonemoc' }
];
const initialValues = {
email: '',
password: '',
confirmPassword: '',
modeOfContact: '',
phone: ''
};
const validationSchema = yup.object({
email: yup.string().email('Invalid email format').required('Required'),
password: yup.string().required('Required'),
confirmPassword: yup
.string()
.oneOf([yup.ref('password'), ''], 'Passwords must match')
.required('required'),
modeOfContact: yup.string().required('Required'),
phone: yup.string().when('modeOfContact', {
is: 'telephonemoc',
then: yup.string().required('Required')
})
});
const onSubmit = (values) => {
console.log('Form data', values);
};
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
>
{(formik) => {
return (
<Form>
<FormikControl
control="input"
type="email"
label="Email"
name="email"
/>
<FormikControl
control="input"
type="password"
label="Password"
name="password"
/>
<FormikControl
control="input"
type="password"
label="Confirm Password"
name="confirmPassword"
/>
<FormikControl
control="radio"
type="Mode of contact"
label="modeOfContact"
options={options}
/>
<FormikControl
control="input"
type="text"
label="Phone number"
name="phone"
/>
<button type="submit" disabled={!formik.isValid}>
Submit
</button>
</Form>
);
}}
</Formik>
);
}
export default Registrationform;
FormikControl:
import React from 'react';
function FormikControl({ control, id, label, ...rest }) {
return (
<>
{control === 'input' && <label htmlFor={id}>{label}</label>}
<input id={id} {...rest} />
</>
);
}
export default FormikControl;
FormikContainer:
import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import FormikControl from './FormikControl';
function FormikContainer() {
const initialValues = {
email: '',
password: ''
};
const validationschema = Yup.object({
email: Yup.string().required('Required')
});
const onSubmit = (values) => console.log('Form data', values);
return (
<div>
<Formik
initialValues={initialValues}
validationschema={validationschema}
onSubmit={onSubmit}
>
{(formik) => (
<Form>
<FormikControl
control="input"
type="email"
label="Email"
name="email"
/>
<FormikControl
control="input"
type="password"
label="Password"
name="password"
/>
<button type="submit">Submit</button>
</Form>
)}
</Formik>
</div>
);
}
export default FormikContainer;
In order to get radio button rendered using Formik, you have to import Field component and use it by sending type="radio", here is how it should look like:
enter link description here
Or by using the same component you created but with type="radio" :
<FormikControl
control="input"
type="radio"
.....
/>
Related
I am new to React and especially formik. I am trying to learn how to create a login form using formik that will display a label called email with the email input. A label called password with the password input and a button called submit.
My problem is that only the two inputs and submit button displays in the browser. The two labels for email and password do not display in the browser. Please advise how I can fix this.
App.js:
import React from 'react';
import './App.css';
import FormikContainer from './components/FormikContainer';
import LoginForm from './components/LoginForm';
function App() {
return (
<div>
<LoginForm />
</div>
);
}
export default App;
LoginForm.js:
import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import FormikContainer from './FormikContainer';
import FormikControl from './FormikControl';
function LoginForm() {
const initialValues = {
email: '',
password: ''
};
const validationschema = Yup.object({
email: Yup.string().email('invalid email format').required('Requird'),
password: Yup.string().required('Required')
});
const onSubmit = (values) => {
console.log('Form data', values);
};
return (
<div>
<Formik
initialValues={initialValues}
validationschema={validationschema}
onSubmit={onSubmit}
>
{(formik) => {
return (
<Form>
<FormikControl
control="input"
type="email"
label="Email"
name="email"
/>
<FormikControl
control="input"
type="password"
label="Password"
name="password"
/>
<button type="submit" disabled={!formik.isValid}>
Submit
</button>
</Form>
);
}}
</Formik>
</div>
);
}
export default LoginForm;
FormikControl.js:
import React from 'react';
function FormikControl(props) {
const { control, ...rest } = props;
switch (control) {
case 'input':
return <input {...rest} />;
case 'textarea':
case 'select':
case 'radio':
case 'checkbox':
case 'date':
default:
return null;
}
return <div></div>;
}
export default FormikControl;
FormikContainer.js
import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import FormikControl from './FormikControl';
function FormikContainer() {
const initialValues = {
email: ''
};
const validationschema = Yup.object({
email: Yup.string().required('Required')
});
const onSubmit = (values) => console.log('Form data', values);
return (
<div>
<Formik
initialValues={initialValues}
validationschema={validationschema}
onSubmit={onSubmit}
>
{(formik) => (
<Form>
<FormikControl
control="input"
type="email"
label="Email"
name="email"
/>
<button type="submit">Submit</button>
</Form>
)}
</Formik>
</div>
);
}
export default FormikContainer;
I would like to do easily this instead :
function FormikControl({ control, id, label, ...rest }) {
return (
<>
{control === "input" && <label htmlFor={id}>{label}</label>}
<input id={id} {...rest} />
</>
);
}
export default FormikControl;
I have a value in a form (email) that I want to transform into lowercase. I have a transform in Yup that's working, but Formik does not show a lowercase value.
How do I make it so that, when I enter the email in uppercase, it gets converted to lowercase automatically?
Here is my code:
import React from "react";
import { render } from "react-dom";
import { Formik } from "formik";
import * as Yup from "yup";
import { DisplayFormikState } from "./helper";
import "./style.css";
const validationSchema = Yup.object({
email: Yup.string()
.transform(function (value, originalvalue) {
return this.isType(value) && value !== null ? value.toLowerCase() : value;
})
.email()
.required()
.label("Email")
});
const App = () => (
<div className="app">
<Formik
initialValues={{ name: "" }}
onSubmit={() => {}}
validationSchema={validationSchema}
>
{(props) => {
const { handleBlur, handleChange, values, errors, touched } = props;
return (
<form onSubmit={props.handleSubmit}>
<h1>Email Form</h1>
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{errors.email && touched.email && errors.email}
<button type="submit">Submit</button>
<DisplayFormikState {...props} />
</form>
);
}}
</Formik>
</div>
);
render(<App />, document.getElementById("root"));
In your form, Formik and Yup essentially have two separate duties:
Formik manages the form's state (values)
Yup performs validations and tells Formik whether the values are valid or not
Yup will not set the values in your form.
Remove the case conversion from the Yup transformation. Instead, simply set the value to lowercase and pass it to setFieldValue() before yup does the validation.
const validationSchema = Yup.object({
email: Yup.string()
.email()
.required()
.label("Email")
});
const App = () => (
<div className="app">
<Formik
initialValues={{ name: "" }}
onSubmit={() => {}}
validationSchema={validationSchema}
>
{(props) => {
const { handleBlur, setFieldValue, values, errors, touched } = props;
return (
<form onSubmit={props.handleSubmit}>
<h1>Email Form</h1>
<input
type="email"
name="email"
onChange={(e)=>{
const value = e.target.value || "";
setFieldValue('email', value.toLowerCase());
}}
onBlur={handleBlur}
value={values.email}
/>
{errors.email && touched.email && errors.email}
<button type="submit">Submit</button>
<DisplayFormikState {...props} />
</form>
);
}}
</Formik>
</div>
);
render(<App />, document.getElementById("root"));
I using material-ui with react.
I want to do validations such as require and maxlength and minlength. according to material-ui docs I have to use the error prop and helperText to display the error. which mean I have to trigger a function myself that check the control and display the error. :(
I wounder if this is the right way to handle validation with react, the Textfield itself can't display require message (for example)? I have to specify each error myself? for example in angular I just add require or minlength and the control display the correct error.
Or maybe there is an easy way to do it?
got it :) here my ex :
import { Link } from 'react-router-dom';
import useForm from "react-hook-form";
import * as yup from 'yup';
const LoginFormSchema = yup.object().shape({
password: yup.string().required().min(4),
username: yup.string().required().min(4)
});
export function LoginForm(props) {
const { register, handleSubmit, watch, errors } = useForm({ defaultValues, validationSchema: LoginFormSchema });
const onSubmit = data => { props.onSubmit(data); }
<div className="form-container">
<form className="form" onSubmit={handleSubmit(onSubmit)}>
<div className="form-header">
<i className="material-icons">
account_circle
</i>
<h2>Login Form</h2>
</div>
<TextField name="username" label="username" inputRef={register} />
<span className="error-message">
{errors.username && errors.username.type === "required" && "username is required"}
{errors.username && errors.username.type === "min" && "username required to be more than 4 characters"}
</span>
<TextField type="password" name="password" label="password" inputRef={register} />
<span className="error-message">
{errors.password && errors.password.type === "required" && "password is required"}
{errors.password && errors.password.type === "min" && "password required to be more than 4 characters"}
</span>
</form>
You need to install yup and formik: npm i -s yup formik
Here is a working sample with formik yup and material-ui:
import React from "react";
import { Formik, Form, useField } from "formik";
import { TextField } from "#material-ui/core";
import * as yup from "yup";
//Reusable Textbox
const MyTextField = ({
placeholder,
type = "normal",
...props
}) => {
const [field, meta] = useField<{}>(props);
const errorText = meta.error && meta.touched ? meta.error : "";
return (
<TextField
variant="outlined"
margin="normal"
type={type}
placeholder={placeholder}
{...field}
helperText={errorText}
error={!!errorText}
/>
);
};
const validationSchema = yup.object({
username: yup
.string()
.required()
.max(30)
.min(2)
.label("Username"),
password: yup
.string()
.required()
.max(30)
.min(2)
.label("Password")
});
const Signin = ({ history }) => {
return (
<div className="SignupOuter">
<Formik
validateOnChange={true}
initialValues={{
username: "",
password: "",
loading: false
}}
validationSchema={validationSchema}
onSubmit={async (data1, { setSubmitting }) => {
setSubmitting(true);
//Call API here
}}
>
{({ values, errors, isSubmitting }) => (
<Form className="Signup">
<MyTextField placeholder="Username" name="username" />
<MyTextField
placeholder="Password"
name="password"
type="password"
/>
</Form>
)}
</Formik>
</div>
);
};
export default Signin;
With Formik, my input shows an [object Object] value instead of behaving in a standard manner.
Code is here.
import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";
const SignupForm = () => {
return (
<Formik
initialValues={{ email: "" }}
validationSchema={Yup.object({
email: Yup.string()
.email("Mauvais e-mail")
.required("Champ requis")
})}
onSubmit={values => {
alert(JSON.stringify(values, null, 2));
}}
>
<Form>
<label htmlFor="email">Email</label>
<ErrorMessage name="email" />
<br />
<Field name="email" type="email" />
<button type="submit">OK</button>
</Form>
</Formik>
);
};
ReactDOM.render(<SignupForm />, document.querySelector("#root"));
Formik matches the initial values to the name of the field, not the id.
Try using this as your Field:
<Field name="email" id="email" type="email" />
import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";
const SignupForm = () => {
return (
<Formik
initialValues={{ email: "" }}
validationSchema={Yup.object({
email: Yup.string()
.email("Mauvais e-mail")
.required("Champ requis")
})}
onSubmit={values => {
alert(JSON.stringify(values, null, 2));
}}
>
{props => (
<Form>
<label htmlFor="email">Email</label>
<ErrorMessage name="email" />
<br />
<Field
name="email"
id="email"
type="email"
onChange={e => {
props.setTouched({ email: true });
props.handleChange(e);
}}
/>
<button type="submit">OK</button>
</Form>
)}
</Formik>
);
};
ReactDOM.render(<SignupForm />, document.querySelector("#root"));
You can also check the docs for more info on Field
You can use:
console.log('form values:'+ JSON.stringify(formik.values));
I have been trying to come up with a way implement the submit function of the react-apollo <Mutation> component. Found some examples out there that seem to be an overkill for this simple task, including this and this. Since I am fresh programmer just starting to learn React, let alone Formik or even HOCs (I guess that's the way to go?), I can't really wrap my head around these examples and how to adapt them to my analogue Hello world code.
Here's my sign up form:
import React, { Component } from "react";
import { withFormik, Form, Field } from "formik";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";
const CREATE_USER_MUTATION = gql`
mutation CREATE_USER_MUTATION(
$name: String!
$email: String!
$password: String!
) {
signup(name: $name, email: $email, password: $password) {
id
name
email
password
permissions
}
}
`;
class App extends Component {
state = {
name: "",
email: "",
password: ""
};
render() {
return (
<Mutation mutation={CREATE_USER_MUTATION}>
{(signup,{loading}) => (
<Form>
<Field type="text" name="name" placeholder="Name" />
<Field type="email" name="email" placeholder="Email" />
<Field type="password" name="password" placeholder="Password" />
<button type="submit" disabled={loading}>
Sign Up
</button>
</Form>
)}
</Mutation>
);
}
}
const SignupPage = withFormik({
mapPropsToValues() {
return {
name: "",
email: "",
password: ""
};
},
handleSubmit() { ... }
})(App);
export default SignupPage;
How can I access signup in handleSubmit?
Using <Formik /> would be a better way to go instead of using the withFormik() HOC.
Since <Formik /> is inside <Mutation/> (instead of the other way around) you are able to call your mutation in the onSubmit field.
https://jaredpalmer.com/formik/docs/api/formik
<Mutation mutation={CREATE_USER_MUTATION}>
{(signup,{loading}) => (
<Formik
initialValues={{ name: '', email: '', password: '' }}
onSubmit={ async (values, actions) => {
// You can access the signup mutation in here now
// You can access values.name, values.email, values.password
// You can access actions, e.g. actions.setSubmitting(false) once you've finished the mutation
}}
render={props => (
<Form onSubmit={props.handleSubmit}>
<Field
type="text"
onChange={props.handleChange}
onBlur={props.handleBlur}
value={props.values.name}
name="name"
placeholder="Name"
/>
<Field
type="email"
onChange={props.handleChange}
onBlur={props.handleBlur}
value={props.values.email}
name="email"
placeholder="Email"
/>
<Field
type="password"
onChange={props.handleChange}
onBlur={props.handleBlur}
value={props.values.email}
name="password"
placeholder="Password"
/>
<button type="submit" disabled={loading}> Sign Up </button>
</Form>
)}
/>
)}
</Mutation>