Input

Input 是对 antd-mobile Input 的 Formily 适配，值为字符串；阅读态下自动切换为 PreviewText.Input。

基础使用

tsx

import { FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    username: '张三',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function InputBasic() {
  return (
    <FormProvider form={form}>
      <Field
        name="username"
        title="用户名"
        required
        decorator={[FormItem]}
        component={[Input]}
      />
      <Field
        name="phone"
        title="手机号"
        decorator={[FormItem]}
        component={[Input, {
          type: 'tel',
          placeholder: '请输入手机号',
        }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

多行输入

使用 Input.TextArea 渲染多行文本，支持字数统计与自适应高度。

tsx

import { FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    remark: '多行文本',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function InputTextArea() {
  return (
    <FormProvider form={form}>
      <Field
        name="remark"
        title="备注"
        decorator={[FormItem]}
        component={[Input.TextArea, {
          placeholder: '请输入备注信息',
          maxLength: 100,
          showCount: true,
          autoSize: true,
        }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

状态控制

clearable 提供一键清空；只读和禁用状态通过 Field 模型设置。

提示

和Picker类型的clearable不一样，这里的clearable是antd-mobile的配置项，Input组件应避免使用 FormItem 的clearable配置项。

tsx

import { FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    username: '张三',
    disabled: '不可编辑',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function InputStatus() {
  return (
    <FormProvider form={form}>
      <Field
        name="username"
        title="可清除"
        decorator={[FormItem]}
        component={[Input, { clearable: true }]}
      />
      <Field
        name="readonly"
        title="只读"
        decorator={[FormItem]}
        component={[Input]}
        readOnly
      />
      <Field
        name="disabled"
        title="禁用"
        decorator={[FormItem]}
        component={[Input]}
        disabled
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API

其余配置参考 Input 官方文档；Input.TextArea 参考 TextArea 官方文档。

Input ​

基础使用 ​

多行输入 ​

状态控制 ​

API ​

Input

基础使用

多行输入

状态控制

API