---
title: WKForm表单

group:
  title: 表单
  path: /form/WKForm/
---

## 何时使用

Form 表单

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import {
  WKButton,
  WKForm,
  WKInputItem,
  WKSwitchItem,
  WKRadioItem,
  WKPickerDateItem,
  WKTextareaItem,
  WKPickerTimeItem,
  WKFormItem,
  WKCheckboxItem,
  WKSliderItem,
  WKView,
} from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const submit = formValue => {
    console.log('-> onSubmit', formValue);
  };
  const genderArr = [
    { label: '男', value: 1 },
    { label: '女', value: 0 },
  ];
  const hobbyArr = [
    { label: '乒乓球', value: 0 },
    { label: '篮球', value: 1 },
    { label: '足球', value: 2 },
    { label: '排球', value: 3 },
  ];
  return (
    <PageWrapper title="基本使用">
      <WKView style={{ width: '100%' }}>
        <WKForm onSubmit={submit} className="w-screen">
          <WKInputItem border={false} label="姓名" path={'name'} initialValue={'wakedata'} />
          <WKSliderItem border={false} label="年龄" path={'age'} initialValue={30} showValue />
          <WKSwitchItem border={false} label="记住我" path={'remember'} initialValue={true} />
          <WKTextareaItem border={false} label="个人介绍" placeholder="请输入个人介绍" path={'description'} />
          <WKPickerDateItem border={false} label="出生日期" placeholder="出生日期" path={'birthday'} />
          <WKPickerTimeItem border={false} label="午休时间" placeholder="午休时间" path={'rest'} />
          <WKRadioItem border={false} label="性别" placeholder="性别" path={'gender'} options={genderArr} />
          <WKCheckboxItem border={false} label="爱好" placeholder="爱好" path={'hobby'} options={hobbyArr} />
          <WKButton formType="submit" text="提交" type="primary" />
        </WKForm>
      </WKView>
    </PageWrapper>
  );
};
```

## 校验规则

```tsx
/**
 * title: 校验规则
 * desc: 校验使用方法
 */
import React from 'react';
import { WKButton, WKForm, WKView, WKInputItem } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

const valLidataPassword = async (value: number | string) => {
  if (!value) return;
  if (value.length < 6) {
    throw new Error('密码不能少于6位');
  }
  if (value.length > 12) {
    throw new Error('密码不能多于12位');
  }
};

export default () => {
  const submit = formValue => {
    console.log('-> onSubmit', formValue);
  };

  return (
    <PageWrapper title="校验规则">
      <WKView style={{ width: '100%' }}>
        <WKForm onSubmit={submit} className="w-screen">
          <WKInputItem
            validator={[{ required: true, message: '姓名必填' }]}
            label="姓名"
            placeholder={'请输入姓名'}
            path={'name'}
          />
          <WKInputItem
            validator={[{ required: true, message: '密码必填' }, { validator: valLidataPassword }]}
            label="密码"
            placeholder={'请输入密码'}
            path={'password'}
          />
          <WKInputItem
            validator={[
              { required: true, message: '邮箱必填' },
              { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入合法邮箱' },
            ]}
            label="邮箱"
            placeholder={'请输入邮箱'}
            path={'email'}
          />
          <WKInputItem
            validator={[
              { required: true, message: '手机号必填' },
              { len: 11, message: '请输入11位数字' },
            ]}
            label="手机号"
            placeholder={'请输入手机号'}
            path={'phone'}
          />
          <WKButton formType="submit" text="提交" type="primary" />
        </WKForm>
      </WKView>
    </PageWrapper>
  );
};
```

## 引用表单对象

```tsx
/**
 * title: 校验规则
 * desc: 校验使用方法
 */
import React, { useRef } from 'react';
import { WKButton, WKForm, WKView, WKInputItem, WKFormModel } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const formRef = useRef<WKFormModel>();
  const submit = formValue => {
    console.log('-> onSubmit', formValue);
  };

  const handleSubmit = () => {
    formRef.current.submit();
  };

  return (
    <PageWrapper title="校验规则">
      <WKView style={{ width: '100%' }}>
        <WKForm ref={formRef} onSubmit={submit} className="w-screen">
          <WKInputItem
            validator={[{ required: true, message: '姓名必填' }]}
            label="姓名"
            placeholder={'请输入姓名'}
            path={'name'}
          />
          <WKInputItem
            validator={[{ required: true, message: '密码必填' }]}
            label="密码"
            placeholder={'请输入密码'}
            path={'password'}
          />
          <WKButton type="primary" onClick={handleSubmit}>
            提交
          </WKButton>
        </WKForm>
      </WKView>
    </PageWrapper>
  );
};
```

## 自定义组件

```tsx
/**
 * title: 自定义组件
 * desc: 当已存在的组件不满足需求是，可按照如下方法扩展组件
 */
import React from 'react';
import { WKFormItem, WKInput, WKForm, WKFormItemProps, WKInputProps, WKFormItemPropNames } from '@wakeapp/components';
import pick from 'lodash/pick';
import omit from 'lodash/omit';

interface WKInputItemProps extends WKFormItemProps, Omit<WKInputProps, 'value' | 'onChange'> {
  formItemClassName?: string;
  formItemStyle?: React.CSSProperties;
}

const WKCustomItem: FC<WKInputItemProps> = React.memo(function WKInputItem(props) {
  const { formItemClassName, formItemStyle, ...other } = props;

  return (
    <WKFormItem
      className={formItemClassName}
      style={formItemStyle}
      {...(pick(other, WKFormItemPropNames) as WKFormItemProps)}
      children={context => {
        return (
          <WKInput
            value={context.value}
            onInput={context.onChange}
            disabled={context.disabled || context.readonly}
            onFocus={context.onFocus}
            onBlur={context.onBlur}
            {...(omit(other, WKFormItemPropNames) as WKInputProps)}
          />
        );
      }}
    ></WKFormItem>
  );
});

export default () => {
  const submit = formValue => {
    console.log('-> onSubmit', formValue);
  };
  return (
    <WKForm onSubmit={submit} className="w-screen">
      <WKCustomItem label="自定义组件" path={'custom'} initialValue={'自定义组件'} />
    </WKForm>
  );
};
```

## WKFormAPI

<API src='@wakeapp/components/WKForm/index.d.ts' hideTitle exports='["default"]' ></API>

## WKFormItemAPI

<API src='@wakeapp/components/WKForm/index.d.ts' hideTitle exports='["WKFormItem"]' ></API>

## WKFieldAPI

<API src='@wakeapp/components/WKForm/index.d.ts' hideTitle exports='["WKField"]' ></API>
