np-form Enter to Submit

Pressing the Enter key on a single-line input in the form will trigger form submission.

last mode

Submit only when pressing Enter on the last form field.

浏览器不支持，请手动复制 enter-submit-last.en.vue

<template>
  <np-form :option="option" />
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'

const option: FormOption = {
  enterSubmitMode: 'last',
  onSubmit: data => {
    console.log('Submitted:', data)
    return new Promise(resolve => setTimeout(resolve, 1000))
  },
  columns: [
    {
      label: 'Username',
      key: 'username',
      type: 'input',
      rule: { required: true, message: 'Please input the username' },
    },
    {
      label: 'Password',
      key: 'password',
      type: 'password',
      rule: { required: true, message: 'Please input the password' },
    },
  ],
}
</script>

all mode

Submit when pressing Enter on any form field.

浏览器不支持，请手动复制 enter-submit-all.en.vue

<template>
  <np-form :option="option" />
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'

const option: FormOption = {
  enterSubmitMode: 'all',
  onSubmit: data => {
    console.log('Submitted:', data)
    return new Promise(resolve => setTimeout(resolve, 1000))
  },
  columns: [
    {
      label: 'Username',
      key: 'username',
      type: 'input',
      rule: { required: true, message: 'Please input the username' },
    },
    {
      label: 'Password',
      key: 'password',
      type: 'password',
      rule: { required: true, message: 'Please input the password' },
    },
  ],
}
</script>

false mode

Disable Enter to submit.

浏览器不支持，请手动复制 enter-submit-false.en.vue

<template>
  <np-form :option="option" />
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'

const option: FormOption = {
  enterSubmitMode: false,
  onSubmit: data => {
    console.log('Submitted:', data)
    return new Promise(resolve => setTimeout(resolve, 1000))
  },
  columns: [
    {
      label: 'Username',
      key: 'username',
      type: 'input',
      rule: { required: true, message: 'Please input the username' },
    },
    {
      label: 'Password',
      key: 'password',
      type: 'password',
      rule: { required: true, message: 'Please input the password' },
    },
  ],
}
</script>

Component Configuration

Prop	Description	Type	Default
enterSubmitMode	How Enter triggers form submit	'last' | 'all' | false	false