jhipster中的 ValidatedField，它使用了react-hook-form -如何在组件中使用它作为字段

Question

我有

<ValidatedForm onSubmit={saveEntity}>
{step1Questions && step1Questions.map((question, index) => <FormQuestion question={question} key={index} />)}

，然后在FormQuestion

const FormQuestion = ({ question }: FormQuestionProps) => {
const { register } = useForm();
switch (question.questionType) {
case 'text':
return (
<ValidatedField
label={question.questionText}
id="questionnaire-'${question.questionName}'"
name={question.questionName}
data-cy={question.questionName}
type="text"
/>
);
case 'radio':

但是验证不起作用-在文档中的代码中它说-";*对于复杂的用例或嵌套的子用例，使用Reactstrap表单元素或ValidatedField或ValidatedInput，并从react-hook-form的useFormhook"传递方法和值

但是它并没有真正说明哪些方法和值。如果我想在上面添加验证，我该怎么做?

Answer 1

我也遇到过类似的问题。您可能想看看是否可以访问validated-form.tsx文件，因为您将在这里找到ValidatedForm和ValidatedField的代码。看看这些帮助我使用useForm钩子。

供参考

export function ValidatedForm({ defaultValues, children, onSubmit, mode, ...rest }: ValidatedFormProps): JSX.Element {
const {
handleSubmit,
register,
reset,
setValue,
formState: { errors, touchedFields, dirtyFields },
} = useForm({ mode: mode || 'onTouched', defaultValues });
useEffect(() => {
reset(defaultValues);
}, [reset, defaultValues]);
return (
<Form onSubmit={handleSubmit(onSubmit)} {...rest}>
{React.Children.map(children, (child: ReactElement) => {
const type = child?.type as any;
const isValidated =
type && child?.props?.name && ['ValidatedField', 'ValidatedInput', 'ValidatedBlobField'].includes(type.displayName);
if (isValidated) {
const childName = child.props.name;
const elem = {
...child.props,
register: child.props.register || register,
error: child.props.error || errors[childName],
isTouched: typeof child.props.isTouched === 'undefined' ? touchedFields[childName] : child.props.isTouched,
isDirty: typeof child.props.isDirty === 'undefined' ? dirtyFields[childName] : child.props.isDirty,
key: childName,
};
if (type.displayName === 'ValidatedBlobField') {
const defaultValue = defaultValues[childName];
const defaultContentType = defaultValues[`${childName}ContentType`];
elem.setValue = typeof child.props.setValue === 'undefined' ? setValue : child.props.setValue;
elem.defaultValue = typeof child.props.defaultValue === 'undefined' ? defaultValue : child.props.defaultValue;
elem.defaultContentType =
typeof child.props.defaultContentType === 'undefined' ? defaultContentType : child.props.defaultContentType;
}
return React.createElement(type, { ...elem });
}
return child;
})}
</Form>
);
}

<标题>

所以ValidatedForm会查看它的子元素并检查它是ValidatedField还是ValidatedInput等等。如果不是，那么它就不会执行useForm钩子。在你的代码中，FormQuestion是直接子，所以它不做useForm的东西。

相反，您必须手动执行。首先，去掉ValidatedForm并用Form替换它，就像您在代码片段中看到的那样。然后，复制useForm代码并将其放入您的代码中，您可能需要进行一些小的调整。最重要的是，你要添加register: register在你的ValidatedField标签

所以最后，它应该看起来像

const {
handleSubmit,
register,
reset,
setValue,
formState: { errors, touchedFields, dirtyFields },
} = useForm({ mode: 'onTouched', defaultValues });
<Form onSubmit={handleSubmit(saveEntity)}>
{step1Questions && step1Questions.map((question, index) => <FormQuestion question={question} key={index} />)}
const FormQuestion = ({ question }: FormQuestionProps) => {
switch (question.questionType) {
case 'text':
return (
<ValidatedField
register: register
label={question.questionText}
id="questionnaire-'${question.questionName}'"
name={question.questionName}
data-cy={question.questionName}
type="text"
/>
);
case 'radio':