[英]How to validate control from material-ui in react?
I using material-ui with react.我使用material-ui和 react。
I want to do validations such as require
and maxlength
and minlength
.我想做诸如
require
和maxlength
和minlength
验证。 according to material-ui docs I have to use the error
prop and helperText
to display the error.根据 material-ui 文档,我必须使用
error
道具和helperText
来显示错误。 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.例如,在 angular 中,我只需添加
require
或minlength
,控件就会显示正确的错误。
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你需要安装 yup 和 formik: npm i -s yup formik
Here is a working sample with formik yup and material-ui:这是一个带有 formik yup 和 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.