Formik & yup Formular-Validierung funktioniert nicht wie erwartet mit VirtualizedSelect
Ich ein Formular erstellt mit formik, um Formular-Validierungen.
Ich habe die Komponenten Formik, Form, Feld, form formik und konfiguriert Sie:
import { Formik, Form, Field } from "formik";
import { object, string } from "yup";
import isEmpty from "lodash/isEmpty";
import FormikSelectInput from "../common/FormikSelectInput";
class App extends Component {
render() {
const options = this.props.categories.map(c => {
return { label: c.name, value: c.name };
});
return (
<Formik
validationSchema={object().shape({
category: string().required("Category is required.")
})}
initialValues={this.props.obj}
onSubmit={(values, actions) => {
console.log(values);
}}
render={({ errors, dirty, isSubmitting, setFieldValue }) => (
<Form>
<Field
name="category"
label="Categories"
value={this.props.obj.category.name}
options={options}
component={FormikSelectInput}
/>
<button
type="submit"
className="btn btn-default"
disabled={isSubmitting || !isEmpty(errors) || !dirty}
>
Save
</button>
</Form>
)}
/>
);
}
}
//Prop Types validation
App.propTypes = {
obj: PropTypes.object.isRequired,
categories: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
};
const getElementByID = (items, id) => {
let res = items.filter(l => l.id === id);
return res.length ? res[0] : null; //since filter returns an array we need to check for res.length
};
//Redux connect
const mapStateToProps = ({ objects, categories }, ownProps) => {
let obj = {
id: "",
name: "",
category: { id: "", name: "" }
};
return {
obj: getElementByID(objects, ownProps.match.params.id) || obj,
categories: categories
};
};
export default connect(
mapStateToProps,
{...}
)(App);
Und ich habe eine benutzerdefinierte Komponente 'FormikSelectInput':
import React, { Component } from "react";
import classnames from "classnames";
import VirtualizedSelect from "react-virtualized-select";
import "react-select/dist/react-select.css";
import "react-virtualized/styles.css";
import "react-virtualized-select/styles.css";
const InputFeedback = ({ children }) => (
<span className="text-danger">{children}</span>
);
const Label = ({ error, children, ...props }) => {
return <label {...props}>{children}</label>;
};
class FormikSelectInput extends Component {
constructor(props) {
super(props);
this.state = { selectValue: this.props.value };
}
render() {
const {
field: { name, ...field }, //{ name, value, onChange, onBlur }
form: { touched, errors }, //also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
className,
label,
...props
} = this.props;
const error = errors[name];
const touch = touched[name];
const classes = classnames(
"form-group",
{
"animated shake error": !!error
},
className
);
console.log("props", props);
return (
<div className={classes}>
<Label htmlFor={name} error={error}>
{label}
</Label>
<VirtualizedSelect
name={name}
id={name}
className="form-control"
{...field}
{...props}
onChange={(selectValue) => this.setState(() => {
this.props.form.setFieldValue('category',selectValue)
return { selectValue }
})}
value={this.state.selectValue}
/>
{touch && error && <InputFeedback>{error}</InputFeedback>}
</div>
);
}
}
export default FormikSelectInput;
Meine Komponente ist arbeiten und ich bin in der Lage, um eine option auszuwählen, aber warum formik zusammen mit 'yup' Validierung zeigt mir eine Fehlermeldung, wenn ich leere das Feld auswählen.
Wenn ich klar mein select Feld bekomme ich eine FEHLERMELDUNG - " Kategorie muss ein string
geben, aber der Letzte Wert war: null
. Wenn "null" ist gedacht als ein leerer Wert werden Sie sicher, dass daneben das schema als .nullable()
'
Mein code basiert auf dem dieses Beispiel.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sieht es aus wie das Feld erwartet, dass die Zeichenfolge erforderlich sein, basierend auf Ihre
validationSchema
.Den Fehler geholfen, mich in die richtige Richtung. Hier ist die Dokumentation für Yup
.nullable()
: https://github.com/jquense/yup#mixednullableisnullable-boolean--false-schemaVersuchen .nullable (), um die Kette von Validierungen.
validationSchema={object().shape({
category: string().required("Category is required.").nullable()
})}
Hoffe, das hilft.