Support for Composition API

[m-thomson]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

There doesn't appear to be a documented way to create validated forms using the Vue Composition API. The Composition API is available in Vue 2 (via @vue/composition-api package) and will be a big part of Vue 3.

What does the proposed API look like?

Right now, the Vue instance is required to use Form.createForm( [instance] ), but the Vue instance (this) is not available in the setup() method in the composition API.

[sendya]

const BaseLoginForm = defineComponent({
  setup (props: FormProps, ctx: SetupContext) {
    const { getFieldDecorator, validateFields } = props.form
    const store = useStore()
    const router = useRouter()

    const handleSubmit = (e: Event) => {
      e.preventDefault()
      validateFields((err: any, values: any) => {
        if (!err) {
           console.log('succeed')
           return
        }
      })
    }

    return () => (
      <Form onSubmit={handleSubmit}>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: i18nRender('user.login.username.required') }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder={i18nRender('user.login.username.placeholder')}
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: i18nRender('user.login.password.required') }],
          })(
            <Input
              type="password"
              id="new1-password"
              allowClear={true}
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder={i18nRender('user.login.password.placeholder')}
            />
          )}
        </Form.Item>
        <Form.Item>
          <Button
            loading={useState.loginFormLoading}
            html-type="submit"
            type="primary"
            onClick={handleSubmit}>
            {i18nRender('user.login.button.submit')}
          </Button>
          <Button
            type="link"
            onClick={() => router.push('/')}>
            {i18nRender('user.login.button.back')}
          </Button>
        </Form.Item>
      </Form>
    )
  },
})

const LoginForm = Form.create({})(BaseLoginForm)


// views
export default defineComponent({
    setup () {
        return () => (
            <div>
                <LoginForm wrappedComponentRef={(ref: any) => { // do something } } />
            </div>
        )
    }
})

[m-thomson]

Thank you @sendya

[wyzgo]

Hi @sendya , what's your '@vue/composition-api' version? I can't return tsx in setup. Did you use any plugins?

[CraxGrix]

Hi @sendya , what's your '@vue/composition-api' version? I can't return tsx in setup. Did you use any plugins?

He uses Vue3, not the Composition API, so the code he replies cannot run in the Composition API

[sendya]

@CraxGrix

He uses Vue3, not the Composition API, so the code he replies cannot run in the Composition API

Composition API is a Vue3 features. Only compatible packages @vue/composition-api can be used in vue2, but the syntax is the same.

The code I provided can run on vue2 via @vue/composition-api

If you have any questions, please go to discussions

[CraxGrix]

@CraxGrix

He uses Vue3, not the Composition API, so the code he replies cannot run in the Composition API

Composition API is a Vue3 features. Only compatible packages @vue/composition-api can be used in vue2, but the syntax is the same.

The code I provided can run on vue2 via @vue/composition-api

If you have any questions, please go to discussions
Sorry

I checked again and found that it can indeed run on vue2 via @vue/composition-api

import Form from 'ant-design-vue/lib/form/'
import { defineComponent } from '@vue/composition-api'

const BaseForm = defineComponent({
  setup(props) {
    const { getFieldDecorator } = props.form
    return {
      getFieldDecorator,
    }
  },
  render() {
    const { getFieldDecorator } = this

    return (
      <Form>
        <Form.Item label="Note">
          {getFieldDecorator('note', {
            rules: [{ required: true, message: 'Please input your note!' }],
          })(<a-input />)}
        </Form.Item>
      </Form>
    )
  },
})
export default Form.create({})(BaseForm)

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.