[英]Make a field required depending on the value of a radio button
I am using react-hook-form for my project.我正在为我的项目使用 react-hook-form。 I am trying to make a field required depending on the selected value in the radio button.
我正在尝试根据单选按钮中的选定值创建一个必填字段。 I am using ant design and styled component so maybe this example is not as explicit.
我正在使用 ant 设计和样式组件,所以这个示例可能不那么明确。
<Controller
control={control}
rules={{
required: requiredField(watch, fld),
}}
name={field}
defaultValue={v || ''}
render={({ field: { onChange, value } }) => (
<Radio.Group
defaultValue={matchDataInForm(field)}
disabled={formType === 'read' ? true : readOnly}
value={value}
onChange={(e) => onChange(e.target.value)}
{...register(field, {
validate: { required: () => getValues().field },
})}
>
{items.length > 0
? items.map((item) => (
<div key={item.id}>
<Radio value={item.id}>{item.label}</Radio>
</div>
))
: null}
</Radio.Group>
)}
/>
The issue now that I have, it is working, but basically when I submit the form the radio button value is not taken into account现在我遇到的问题,它正在工作,但基本上当我提交表单时,单选按钮的值没有被考虑在内
You can use schema definitions to define the validation in a more declarative (and maintainable) way.您可以使用模式定义以更具声明性(和可维护性)的方式定义验证。 You can also switch the schemas on the fly based on checkboxes or radio boxes being set to a certain value.
您还可以根据设置为特定值的复选框或单选框动态切换模式。
Here's a fully working example that expects a field to be set ONLY if a checkbox is set to true: https://codesandbox.io/s/dynamic-schema-with-react-hook-form-forked-ufgt87?file=/src/DynamicForm.tsx这是一个完整的工作示例,仅当复选框设置为 true 时才需要设置字段: https://codesandbox.io/s/dynamic-schema-with-react-hook-form-forked-ufgt87?file=/ src/DynamicForm.tsx
The core of this code is here:这段代码的核心在这里:
const resolver = useMemo(
() => zodResolver(!isChecked ? formSchema : formSchemaWithEmail),
[isChecked]
);
const {
register,
handleSubmit,
formState: { errors }
} = useForm({
resolver: resolver
});
Then you don't have to define any rules on any fields.然后您不必在任何字段上定义任何规则。 The validation rules are inside the
formSchema
and formSchemaWithEmail
objects.验证规则位于
formSchema
和formSchemaWithEmail
对象中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.