form表单遇的坑（react）

目录

1. Modal 中直接调用 form 控制台会报错

2. Warning：Instance created by 'useForm' is not connected to any Form element. Forget to pass 'form' prop?

3. 新旧数据 --- Form.Provider

4.  From.Item 的数据变化（被 Form 接管，自动变化）

5. Form.Item --- rules  规则校验（3个情况）

6. 字段间存在依赖 --- dependencies

7. 改变表单的值   ---  常用且易用混的方法 

---

1. Modal 中直接调用 form 控制台会报错

 因为在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。

通过 Form.useForm 对表单数据域进行交互。即：const [ form ] = Form.UseForm( )

注意  useForm 是 React Hooks 的实现，只能用于函数组件，class 组件通过 ref 获取数据域。

const [ form ] = Form.UseForm( )

<Form 
   form = {form}  // form的控制实例
   name = "formName"
   ....
>
   <Form.Item> </Form.Item>

</Form>

2. Warning：Instance created by 'useForm' is not connected to any Form element. Forget to pass 'form' prop?

     当遇到这个错误，八成是忘记写  form = {form}了，，，

3. 新旧数据 --- Form.Provider

1）提供表单间联动功能，其下设置 name 的 Form 更新时，会自动触发对应事件。

表单commit后，新旧数据在此更新 ，用的onFormFinish（）方法

2）当在 onFormFinish方法里打印不出任何值时，八成忘记写 commit( )

<Form.Provider
  onFormFinish={(name, {values, forms})=> {     //子表单提交时触发此方法
    fromFinish={(name, {values, forms}};
    if (name === 'form1') {
      // Do something...
    }

  }}
>
  <Form name="form1">...</Form>
  <Form name="form2">...</Form>
</Form.Provider>

const fromFinish = (name:string, {values, forms}:{values:any, forms:any})=>{
   setFormVals({ ...foemVals, ...values });  //formVals 新的值，values 旧的值
}

4.  From.Item 的数据变化（被 Form 接管，自动变化）

被设置了 name 属性的 From.Item 包装的控件，表单控件会自动添加 value或 valuePropName 指定的其他属性、onChange或 trigger 指定的其他属性，数据同步将被 Form 接管。

注： 1）不应该再用 onChange 来做数据收集同步

        2）不能用控件的 value 或 defaultValue 等属性来设置表单域的值。（因为当为 Form.Item 设置 name 属性后，子组件会转为受控模式。因而 defaultValue 不会生效。需要在 Form 上通过 initialValues 设置默认值。）

        3）一个Item内只能有一个子元素，放的多了，就只有最后一个元素的值

5. Form.Item --- rules  规则校验（3个情况）

1) 若校验呈开启状态，表单commit时会自动先校验一遍，数据符合才会真正commit

2) 若手动校验form.validateFileds(), 即使不触发此方法，只要required: ture时，commit前就会校验。 

<Form.Item
  ...
  rules={[
    {
        required: ture ,  //开启校验
        message：‘校验提示的信息’，
        validator(rule, value:number){    //自定义校验，接受promise作为返回值
            if(value !== null){
                 return Promise.resolve();
            }else{
                 return Promise.reject('校验不成功的提示');
            }
        }
    }
  ]}
>
....
</Form.Item>

3) 若只想验证表单里的部分表单项，也是可以的, 参数要数组形式

       只验证密码： form.validateFileds( ['passwd'] ).then（(res)=>{ console.log(res) }）； 

6. 字段间存在依赖 --- dependencies

当字段间存在依赖关系时使用。如果一个字段设置了 dependencies 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。例如 新密码和确认密码

7. 改变表单的值   ---  常用且易用混的方法 

getFieldsValue	获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值     所有字段的值
getFieldValue	获取对应字段名的值    单个字段的值
resetFields	重置一组字段到 initialValues
setFields	设置一组字段状态
setFieldsValue	设置表单的值      改变表单里的值
submit	提交表单，与点击 submit 按钮效果相同
validateFields	触发表单验证    可全部验证也可单个验证

参考资料：

表单 Form - Ant Design

antd的Form表单控制实例的使用_芊赋予翔的博客-CSDN博客_antd useform