目录
4. From.Item 的数据变化(被 Form 接管,自动变化)
5. Form.Item --- rules 规则校验(3个情况)
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 | 触发表单验证 可全部验证也可单个验证 |
参考资料: