antd Form 校验提示 onFinishFailed = { formPrompt } 无触发失败回调

项目场景：

项目背景：

项目场景：提交表单且数据验证失败后，需要触发回调事件

---

问题描述

问题：

必填表单未填写，提交校验提示，使用onFinishFailed(提交表单且数据验证失败后回调事件)，无法触发：

失败写法:

    <Form form={form} onFinish={submit} onFinishFailed={formPrompt}>
            <Form.Item
              name="phone"
              rules={[
                {
                  required: true,
                  pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
                  message: '请输入正确的联系电话',
                },
              ]}
            >
              <InputNumber bordered={false} min={0} disabled={showAudit} />
            </Form.Item>
       </Form>
		//触发提交表单--失败关键
		<Button  type="primary" onClick={() => submit(3)}>
       		 提交审批
		 </Button>

 //数据验证失败后回调事件
 const formPrompt = (val) => {
    let nameAll = val.errorFields.map((item) => item.errors[0].substring(3));
    switch (val.errorFields.length) {
      case 1:
        message.warn(`'${nameAll[0]}',共有${nameAll.length}个表单未填写`);
        break;
      case 2:
        message.warn(`'${nameAll[0]},${nameAll[1]}',共有${nameAll.length}个表单未填写`);
        break;
      default:
        message.warn(`'${nameAll[0]},${nameAll[1]}'等,共有${nameAll.length}个表单未填写`);
        break;
    }
  };
  //submit
  const submit = async (index) => {
    try {
      let value = await form.validateFields();
     } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  };

---

原因分析：

问题的分析：

提交表单方式与onFinishFailed不匹配：

使用try{}cacth(){}获取表单参数

  const submit = async (index) => {
    try {
      let value = await form.validateFields();
     } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  };

使用try{}cacth(){}获取表单参数，将无法触发onFinishFailed，cacth会抛出异常

---

解决方案：

解决方案：

第一种：
使用try{}cacth(){}获取表单参数：获取捕获异常传入函数
好处：submit 可以传入参数
缺点：无法触发onFinishFailed

	<Button  type="primary" onClick={() => submit(3)}>
       提交审批
	</Button>

  const submit = async (index) => {
    try {
      let value = await form.validateFields();
      console.log('表单参数',value)
     } catch (errorInfo) {
     //关键，获取捕获异常传入函数
     formPrompt(errorInfo);
      console.log('Failed:', errorInfo);
    }
  };

第二种
使用form.submit(),
好处：可以触发**onFinishFailed**

	<Button type="primary" onClick={() => form.submit()}>
        提交审批
    </Button>

const submit = async (value) => {
console.log('表单参数',value)
}