我有一个 JSON 对象，其中包含一组 JSON 对象。我的需要是 2 个数组元素（车辆），我只需要确保至少一个充满数据，即两者都不能为空。请参阅下面的声明和我的 Yum 架构
const initialValues = {
applicantID: "",
applicantTypeID: "1",
firstName: "",
lastName: "",
email: "user@abc.co",
address1: "",
address2: "",
suburb: "",
state: "AZ",
postcode: "",
phone: "",
mobile: "",
business_unit_school: "",
building: "",
level: "",
room: "",
applicationStatusID: "1",
**vehicles: [
{ registrationNumber: "", make: "", model: "" },
{ registrationNumber: "", make: "", model: "" },
],**
};
const validationSchema = Yup.object({
applicantID: Yup.string().required("Employee Number required."),
firstName: Yup.string()
.min(2, "Too Short!")
.max(30, "Max 30 characters allowed.")
.required("Firstname required."),
lastName: Yup.string()
.min(2, "Too Short!")
.max(30, "Max 30 characters allowed.")
.required("Lastname required."),
email: Yup.string().email("Invalid email format").required("Email required."),
address1: Yup.string()
.min(2, "Too short.")
.max(255, "Too Long!")
.required("Address required."),
address2: Yup.string().max(255, "Max 255 characters allowed."),
suburb: Yup.string()
.min(2, "Too Short!")
.max(30, "Max 30 characters allowed.")
.required("Suburb required."),
state: Yup.string()
.min(2, "Too Short!")
.max(30, "Max 30 characters allowed.")
.required("State required."),
business_unit_school: Yup.string()
.min(2, "Too Short!")
.max(100, "Max 100 characters allowed.")
.required("Business unit required."),
**vehicles: Yup.array().of(
Yup.object().shape({
registrationNumber: Yup.string().required("Required"),
})
),**
postcode: Yup.string().required("Postcode required."),
phone: Yup.number()
.required("Phone number required")
.typeError("You must specify a number"),
mobile: Yup.number().required("").typeError("You must specify a number"),
});
我上面的车辆验证有效，尽管它强制用户填写车辆下两个数组项的registrationNumber元素，这不是我想要的。任何帮助将非常感激。我也在下面尝试过，但它不起作用......
let vehicleschema = Yup.object({
vehicles: Yup.array().of(
Yup.object({
registrationNumber: Yup.string().required("Required"),
make: Yup.string().required("Required"),
})
),
});
const validationSchema = Yup.object({
vehicles: vehicleschema.validateAt("vehicles[0].registrationNumber", initialValues)
}),
我在验证时收到以下错误...
TypeError: field.resolve is not a function
(anonymous function)
node_modules/yup/es/object.js:146
143 |
144 | innerOptions.path = makePath(_templateObject(), options.path, prop);
145 | innerOptions.value = value[prop];
> 146 | field = field.resolve(innerOptions);
| ^ 147 |
148 | if (field._strip === true) {
149 | isChanged = isChanged || prop in value;
View compiled
ObjectSchema._cast
node_modules/yup/es/object.js:136
133 | });
134 |
135 | var isChanged = false;
> 136 | props.forEach(function (prop) {
| ^ 137 | var field = fields[prop];
138 | var exists = has(value, prop);
139 |
好的，在使用下面 Luis 的解决方案后，它似乎验证了注册号，尽管我现在得到了多个错误文本。我正在使用 Formik 和 Yup .. Formik 代码如下...
<Grid
container
item
lg={12}
md={12}
xs={12}
spacing={15}
name="vehicles"
style={{ marginBottom: "-4em" }}
>
<Box mx={3} my={2} textAlign="center">
<h2>Vehicle Details</h2>
</Box>
</Grid>
<Grid
container
item
lg={12}
md={12}
xs={12}
spacing={15}
name="vehicles"
style={{ marginBottom: "-4em" }}
></Grid>
{initialValues.vehicles.map((vehicle, index) => (
<Grid
container
item
lg={10}
md={12}
xs={12}
spacing={5}
justify="space-between"
className={classes.rowSpacing}
key={index}
>
<Grid item lg={3} md={5} xs={12}>
<Field
component={TextField}
fullWidth={true}
label="Registration Number"
name={`vehicles[${index}].registrationNumber`}
/>
<FormHelperText error>
<ErrorMessage name="vehicles" />
</FormHelperText>
</Grid>
<Grid item lg={2} md={5} xs={12}>
<Field
component={TextField}
fullWidth={true}
label="Make"
name={`vehicles[${index}].make`}
/>
</Grid>
<Grid item lg={2} md={5} xs={12}>
<Field
component={TextField}
fullWidth={true}
label="Model"
name={`vehicles[${index}].model`}
/>
</Grid>
<br />
</Grid>
))}
</Grid>
请参阅下面的多个错误..错误文本“至少需要一个注册号”重复两次
嗨 Luis，更新的解决方案不起作用，这可能是因为我在表单中同时使用了 Formik-material-ui 和 material-ui..见下文..为了区分两个 TextField 元素，我使用了别名muiTextField 在这里
import {TextField as muiTextField} from "@material-ui/core";
import { TextField, Select } from "formik-material-ui";
以下是我更新的代码...
<Grid item lg={3} md={5} xs={12}>
<Field
//component={TextField}
fullWidth={true}
label="Registration Number"
name={`vehicles[${index}].registrationNumber`}
render={() => (
<muiTextField
error={Boolean(errors.vehicles)}
helperText= {
errors.vehicles && getVehiclesErrors(errors.vehicles)
}
/>
)}
/>
</Grid>
formik-material-ui 只是常见 material-ui 元素的包装。我很好奇为什么您在 getVehicleErrors() 函数中有“电子邮件”引用。那是错字吗？在我更新我的代码（如上所述）后，这里的 muiTextField 指的是 material-ui 的 TextField，现在我在我的表单上看不到车辆登记字段..见下文
设法通过以下更改解决了问题....
const getVehiclesErrors = (errors) => {
return Array.isArray(errors)
? errors.filter((registrationNumber, i, arr) => arr.indexOf(registrationNumber) === i)
: errors;
};
<Grid item lg={3} md={5} xs={12}>
<Field
component={TextField}
fullWidth={true}
label="Registration Number"
name={`vehicles[${index}].registrationNumber`}
/>
{errors.vehicles && touched.vehicles ? (
<div style={{ color: "red" }}>
{getVehiclesErrors(errors.vehicles)}
</div>
) : null}
</Grid>
