如何在反应中验证多步表单 [英] How to validate multistep form in react

问题描述

我有一个多步骤的表单，我正在使用react制作，以进行验证，而我正在使用 react-hook-form .

我已经实现了90％的目标，而我所面对的一件事就是获取动态的第二个表单数据.

我在做什么

• 在我的第一个表格中，当我填写(已验证)两个字段时，我将转到下一个表格
• 在我的下一个表单中，我有两个输入字段，并且在添加按钮上，用户也可以添加多行字段，并且这些行都很好

问题

• 现在，当我以第二种形式创建新字段时，我想验证它们，但不知道该怎么做.

我做了什么

在我的主要组件中，我这样做是为了进行验证

  const形式= [{栏位:['desig'，'dept']，组件:()=>(< Pro register = {register} errors = {errors} defaultValues = {defaultValues}/>)，}，{栏位:[`userInfo [0] .fname`，//如果我静态地放置0,1，则它正在验证该垂直形式，这是我面临的问题`userInfo [0] .sirname`，]，组件:()=>(<基本注册= {注册}错误= {错误}defaultValues = {defaultValues}inputHolder = {inputHolder}deleteRow = {deleteRow}addRow = {addRow}/>)，}，]; 

点击提交后，我正在执行

  const handleSubmit =(e)=>{triggerValidation(forms [currentForm] .fields).then((valid)=> {如果(有效){console.log('完整数据-'，JSON.stringify(defaultValues));}});}; 

在这里，如果要在form2中添加两个数据，我希望获得如下所示的数据

  {"fname":"dsteve"，"sname":"smith"，"userInfo":[{" desig":"ddd"，"dept":"deptee"；"deptee".}，{" desig":"ddd"，"dept":"deptee"；"deptee".}]} 

我已经做了所有事情，但是只有在这里我被困住了，我知道问题出在哪里

代替这个

 字段:["fname"，"sname"]， 

我必须这样做

  fields:[`userInfo [0] .name，`userInfo [0] .sname]， 

此0-1我必须根据索引进行动态调整，我不知道自己缺少什么

我尝试通过 inputHolder 使用索引映射具有索引的字段，但是它不起作用

编辑/更新

如果我这样做的话

  fields:[`userInfo [0] .name`，`userInfo [1] .name`，`userInfo [0] .sname`，`userInfo [1] .sname]， 

因此，它正在对两个字段进行验证，但是我正在手动操作，如果用户创建了更多字段，则应该动态获取这些字段.

这是我的代码沙箱，其中包含完整的代码

这是我的代码沙箱

我愿意使用任何新方法，但是应该使用 react-hook-form 并完全填写我要执行的操作

我现在不知道该如何接受我的方法

解决方案

您可以创建一个由2个空字符串组成的数组，其中第一个表示第一行F名称，然后第二个代表MainComponent中inputHolder下的第一行S Name:

  const [inputHolder，setinputHolder] = useState([{编号:1fname:"，sname:"}]);const [names，setNames] = useState(["，"]]); 

接下来，每当用户广告新行时，您将添加到名称数组中的空字符串中.

  const addRow =()=>{console.log(inputHolder.length);让项目= {id:inputHolder.length + 1，fname:"，sname:"};setinputHolder([... inputHolder，item]);setNames([... names，``，"，]]);}; 

每个空字符串代表F名称和S名称.最后，将字段设置为第二种形式的名称:

 字段:名称，组件:(寄存器，错误，defaultValues)=>(< Form2注册= {注册}错误= {错误}defaultValues = {defaultValues}inputHolder = {inputHolder}addRow = {addRow}/> 

I have a multi-step form, which I am making using react, to work on validation I am using react-hook-form.

I have already achieved 90% of things just one thing I am facing the issue is getting the second form data which is dynamic.

What I am doing is

• In my first form I have two fields when those are filled (validated) I am going to the next form
• In my next form I have two input fields and on the add button user can add multiple rows of fields as well and these are working fine

issue

• Now when I create new fields in the second form I want to validate them but not getting an idea how can I do that.

What I have done

In my main component, I am doing this for validation

const forms = [
  {
    fields: ['desig', 'dept'],
    component: () => (
      <Pro register={register} errors={errors} defaultValues={defaultValues} />
    ),
  },
  {
    fields: [
      `userInfo[0].fname`, // here I am facing issue if I am statically putting 0,1 then it is validating that perticular form
      `userInfo[0].sirname`,
    ],
    component: () => (
      <Basic
        register={register}
        errors={errors}
        defaultValues={defaultValues}
        inputHolder={inputHolder}
        deleteRow={deleteRow}
        addRow={addRow}
      />
    ),
  },
];

On click of submitting, I am doing this

const handleSubmit = (e) => {
  triggerValidation(forms[currentForm].fields).then((valid) => {
    if (valid) {
      console.log('whole form data - ', JSON.stringify(defaultValues));
    }
  });
};

and here i want data as like below if two data is added in form2

    {
  "fname": "dsteve",
  "sname": "smith",
  "userInfo": [
    {
      "desig": "ddd",
      "dept": "deptee"
    },
    {
      "desig": "ddd",
      "dept": "deptee"
    }
  ]
}

I have done everything but here only I have been stuck, I know where the issue is

Instead of this

fields: ["fname", "sname"],

I have to do like this

fields:[`userInfo[0].name, `userInfo[0].sname],

This 0-1 I have to make dynamic as per indexes, I don't know what I am missing

I tried mapping the fields with index through inputHolderbut it did not work

Edit / Update

If I am doing like this

fields:[`userInfo[0].name`,`userInfo[1].name`, `userInfo[0].sname`,`userInfo[1].sname],

So it is taking validation for two fields, but that is manually I am doming, if user creates more fields then that should take these fields dynamically.

Here is my code sandbox, which contains the full code

Here is my code sandbox

I am open to use any new approach but that should use react-hook-form and full fill what I am trying to do

I don't know how to progrees with my approach now

解决方案

You can create an array of 2 empty strings where first one represents first row F name,and second one represents first row S Name under yours inputHolder in the MainComponent:

 const [inputHolder, setinputHolder] = useState([
    {
      id: 1,
      fname: "",
      sname: ""
    }
  ]);
  const [names, setNames] = useState(["", ""]);

Next,every time the user ads a new row you add to empty strings in names array.

 const addRow = () => {
    console.log(inputHolder.length);
    let item = {
      id: inputHolder.length + 1,
      fname: "",
      sname: ""
    };
    setinputHolder([...inputHolder, item]);
    setNames([...names, "", ""]);
   
  };

Where each empty string represents F name and S name. Finally,fields is set to names in second form:

fields: names,
      component: (register, errors, defaultValues) => (
        <Form2
          register={register}
          errors={errors}
          defaultValues={defaultValues}
          inputHolder={inputHolder}
          addRow={addRow}
        />

这篇关于如何在反应中验证多步表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！