标签: react-hook-form

我正在将react-hook-form与typescript和material-ui一起使用。我想将错误消息作为helperTextto传递TextField。我尝试使用这样做， helperText={errors.email?.message} 但打字稿抱怨这个作业。

Property 'email' does not exist on type 'NestDataObject<FormData>'.ts(2339)

我不想从我的 .eslintrc 文件中禁用此规则，因为它可能会忽略我的应用程序中的其他类似问题，而这在某些地方可能是需要的。将react-hook-form的错误消息作为helperText分配给material-ui组件的正确方法是什么？

codesandbox 链接 https://codesandbox.io/s/material-ui-react-form-hook-yi669

我正在使用材料 ui ExpansionPanel。我正在尝试从添加按钮单击添加新面板并从删除按钮单击中删除面板，它工作正常，问题是，当我展开、折叠、添加或删除面板时，表单字段值会丢失。我认为这是由于重新渲染或刷新而发生的。

让我知道我们如何实现上述功能，以便用户可以轻松导航到任何面板，从那里添加一些细节，然后移动到另一个面板并在那里添加一些细节，但是当从一个面板添加细节到另一个面板时，如果用户再次转到那个特定的面板。

看看下面的示例代码

https://codesandbox.io/s/dhananajayx-3n73x?file=/src/App.js:146-160

任何努力都受到高度赞赏

我尝试了几种方法来使材料 UI 的自动完成类型字段成为必需，但我没有得到我想要的行为。我已经将我的领域封装在 react hook 形式中，<Controller/>但没有运气。当没有向字段添加任何内容时，我想在提交时触发消息“字段是必需的”。

下面是代码片段，我没有删除注释，以便其他人更容易理解我之前遵循的方法 -

  <Controller
        name="displayName"
        as={
          <Autocomplete 
                  value={lists}
                  multiple
                  fullWidth
                  size="small"
                  limitTags={1}
                  id="multiple-limit-lists"
                  options={moduleList}
                  getOptionLabel={(option) => option.displayName}
                  renderInput={(params,props) => {
                   return (
                      <div>
                        <div className="container">
                          <TextValidator {...params} variant="outlined" label="Display Name*" className="Display Text" 
                            name="displayName"  id="outlined-multiline-static" 
                            placeholder="Enter Display-Name" size="small"
        onChange={handleDisplay}
         // validators={['required']} this and below line does throw a validation but the problem is this validation stays on the screen when user selects something in the autocomplete field which is wrong.
        // errorMessages={['This field is …

我正在尝试使用 react hook form 制作一个包含两个字段的表单，其中文本字段的所需值取决于选择下拉列表的值。

这是我的代码：

  const { handleSubmit, control, errors } = useForm();

  const [isPickupPoint, togglePickupPoint] = useState(false);

  const handleDestinationTypeChange: EventFunction = ([selected]) => {
    togglePickupPoint(selected.value === "PICKUP_POINT");
    return selected;
  };

            <Grid item xs={6}>
              <InputLabel>Destination type</InputLabel>
              <Controller
                as={Select}
                name="destinationType"
                control={control}
                options={[
                  { label: "Pickup point", value: "PICKUP_POINT" },
                  { label: "Shop", value: "SHOP" },
                ]}
                rules={{ required: true }}
                onChange={handleDestinationTypeChange}
              />
              {errors.destinationType && (
                <ErrorLabel>This field is required</ErrorLabel>
              )}
            </Grid>
            <Grid item xs={6}>
              <Controller
                as={
                  <TextField
                    label="Pickup Point ID" …

我使用以下代码创建带有表单验证的登录页面：

import React from 'react';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { useForm } from 'react-hook-form';

class SignIn extends React.Component {
  
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(errors);

  render() {
    return (
      <div>
        <Form onSubmit={handleSubmit(onSubmit)}>

            <Label>Email : </Label>
            <Input type="email" placeholder="email" name="email" ref={register({required: true, pattern: /^\S+@\S+$/i})}></Input>

            <Label>Password : </Label>
            <Input type="password" placeholder="password"  name="password" ref={register({required: true, min: 8, maxLength: 20})}></Input>

        </Form>
      </div>
    );
  }
}


export default SignIn; …

我是 REACT-HOOK-FORM 的新手。我创建了一个个人资料页面，需要在其中创建两个单独的表单。一次用于“更改密码”，另一次用于“个人资料更改”。我正在努力通过 REACT-HOOK-FORM 创建两个单独的表单并利用它来提供验证。

const { handleSubmit, errors, control, reset, setValue } = useForm({
mode: "onSubmit",
reValidateMode: "onChange",
defaultValues: "",
validateCriteriaMode: "all",
submitFocusError: true,
nativeValidation: false,
});

我需要对上面的代码进行一些编辑吗？请帮忙。

我一直在尝试使用 React-hook-form 和 Chakra UI 组件库在 Next.js 中实现登录表单，但我无法弄清楚为什么我的表单验证错误消息不会显示，尽管遵循了 React-hook-形成文档相当彻底。我将其设置为用户名必须为 2-30 个字符长，密码必须至少为 8 个字符长；两个输入字段都是必需的。提交有效的表单后，将弹出一条警报，表示提交成功。然而，在提交无效表单时，错误消息应显示在无效输入下方，但事实并非如此。然而，我注意到无效的输入字段将在提交时获得焦点。

这是我正在查看的内容：https ://codesandbox.io/s/quirky-wave-jgpwf

提前致谢。

我使用react-hook-form 和 yup 来验证我的表单。

我想知道模式的所有必填字段以在表单中显示一些信息（例如必填字段的“*”）。我们可以用这行代码来实现这一点：

schema.describe().fields[field].tests.findIndex(({ name }) => name === 'required'

但是，此代码不适用于条件验证。

架构示例：

const schema = yup.object().shape({
    email: yup
    .string()
    .email()
    .required(),

    isProfileRequired: yup
    .boolean(),

    profile:  yup
    .object()
    .when('isProfileRequired',{
        is: (isProfileRequired) => isProfileRequired,
        then:
            yup
            .object()
            .nullable()
            .required()
    })
})

有没有办法在表单中检索这些信息？

我正在使用react-select来更好地查看UI，并且我已经实现了它，现在我想做的是

• 我想在用户单击“完成”按钮（表单提交）时验证该输入字段
• 我正在使用react-hook-form进行验证
• 他们提供ref={register}保存输入字段值的
• 所以对于正常的输入字段或选择我可以像下面一样使用它

<label  htmlFor="fname">
    First Name
</label>
<input
    type="text"
    name="fname"
    id="fnameid"
    className="form-control"
    ref={register({
        required: 'First name is required',
    })}
/>

{errors.fname && (
    <div>
        <span className="text-danger">
            {errors.fname.message}
        </span>
    </div>
)}

现在上面的工作正常，但如果react-select我不知道如何继续

<Select
    value={initailSelect}
    onChange={(e) => onChangeAge(e)}
    options={data}
/>

因此，当我单击“提交”按钮时，它仅对 fname 进行验证，并仅在控制台上为 fname 提供输出

我尝试像下面这样做

<Select
    value={initailSelect}
    onChange={(e) => onChangeAge(e)}
    options={data}
    ref={register({
        required: 'age is required is required',
    })}
/>

代码沙箱这是我的代码沙箱我的工作代码，请检查

编辑

我尝试了这种方法，但它不占用defaultValue或Value，因为我想显示选定的一个值，并且在某些情况下，我从服务器获取我想显示为选定的值。

找不到解决办法。
我正在使用react-hook-form并且我想在表单为空时禁用提交按钮，并且只要所有表单都至少写入了一些内容就可以启用。
我将如何使用react-hook-form？