Vue3 antd project actual combat - resetFields reset form is invalid [handwritten reset function reset form data]
A collection of articles about form forms
| Article content | article link |
|---|---|
| Form formSubmit and verify | https://blog.csdn.net/XSL_HR/article/details/128495087?spm=1001.2014.3001.5501 |
| Form formnested use | https://blog.csdn.net/XSL_HR/article/details/128488913?spm=1001.2014.3001.5501 |
| Form formDynamic Validation Rules | https://blog.csdn.net/XSL_HR/article/details/128437275?spm=1001.2014.3001.5501 |
| From formreset and clear | https://blog.csdn.net/XSL_HR/article/details/128495222?spm=1001.2014.3001.5501 |
Scene recurrence
In the previous article, we introduced the reset and clearing of the form form , but left a problem——resetFields reset form not working. The specific content is as follows:
Invalidation effect : (The reset steps are the same as those in the previous article.With the resetFields function)
It can be found that no matter how we click, the form data does not respond .
Cause Analysis
Query the official document and find that,The resetFields method is to reset the entire form，Reset all field values to initial values and remove validation results，instead of emptying the form。
Solution ( handwritten empty function )
If you need to clear the form data, don’t worry, just write a clear function by hand
The function content is as follows(The parameters can be modified as needed, the logic is very simple)
const cancelContent = () => {
// 将表单中的各项数据恢复初始值即可
contentFormState.value = {
certificates_content:'',
certificates_select:'2022年技术部年度证书',
confirm:1
}
router.push("/files/updateHonoraryFiles") // 返回需要返回的页面
message.success("取消成功！！！可新建输入") // 反馈文字提示
}
Achievement effect :
At this time, the problem that the resetFields reset form is invalid has been solved.