Antd 4.0.0: Как использовать form.getFieldValue() и все API форм с помощью `const [form] = Form.useForm`?

Я запускаю React с Ant Design и получаю 9X_react-dom следующую ошибку:

Экземпляр, созданный с 9X_reactjs помощью useForm, не связан ни с одним элементом 9X_ant-design формы. Забыли передать опору 'form'?

9X_Antd 4.0.0: Как использовать form.getFieldValue() и все API форм с помощью `const [form] = Form.useForm`?_ecmascript

Код:

// .../services/index.js
export { default as registerService } from './registerService'


// .../services/registerService.js
import axios from '../../../configs/api.service'

const registerService = (form) => {
  return {
    validatePasswordAndConfirmPassword: async (rule, value) => {
      if (value && value !== form.getFieldValue(['user', 'confirmPassword'])) {
        throw new Error('Password and Confirm Password must be same')
      }
    },

    register: async user => {
      const { data } = await axios.post('/users', user)
      const { _id, username } = data
      console.log('Register Success:', `User ${username} is created, You get ID: ${_id}`)
      return data
    },
  }
}

export default registerService

// Register Component
import React from 'react'
import { Button, Form, Input } from 'antd'
import { registerService } from '../../services/'

const Register = () => {
  const [form] = Form.useForm()
  const service = registerService(form)

  const onFinish = async ({ user }) => {
    try {
      await service.register(user)
    } catch (err) {
      console.error('Register Failed:', err.response)
    }
  }

  const onFinishFailed = errorInfo => {
    console.error('Failed:', errorInfo)
  }

  return (
    <>
      
) } export default Register

как 9X_ant-design я могу исправить эту ошибку?

12
0
1
Общее количество ответов: 1

Ответ #1

Ответ на вопрос: Antd 4.0.0: Как использовать form.getFieldValue() и все API форм с помощью `const [form] = Form.useForm`?

Хорошо ... Я уже исправил

Я просто передаю 9X_vanilla-javascript свойство form={form} компоненту формы. Как строка 4

const [form] = Form.useForm()

11
1

  • Одно важное замечание: если вы передаете опору `form` в дизайн Ant` Modal`, установите д ...