Form 表单

import { Form, FormItem, FormType, Input, Wrapper } from "@finalx/components";

interface IProps {}
interface IFields {
  name: string;
  idCard: string;
  mobile: string;
  accNo: string;
}
export const Index: FC<IProps> = () => {
  const [status, setStatus] = useState(false);
  const formRef = useRef<FormType>({} as FormType);
  const onSubmit = async () => {
    const validateValues: IFields = await formRef.current.validateFields();
    console.log("validateValues", validateValues);
  };

  return (
    <Wrapper>
      <Form formRef={formRef} labelColor='white'>
        <FormItem name='name' label='名称' required disabled>
          <Input placeholder='请输入名称' placeholderStyle='color: rgb(255,255,255,0.4)' />
        </FormItem>

        <FormItem name='idCard' label='身份证号码' required rules={{ type: "idCard" }}>
          <Input placeholder='请输入身份证号码' placeholderStyle='color: rgb(255,255,255,0.4)' />
        </FormItem>
        <FormItem name='mobile' label='手机号' required rules={[{ type: "phone" }]}>
          <Input placeholder='请输入手机号' placeholderStyle='color: rgb(255,255,255,0.4)' />
        </FormItem>

        <FormItem
          name='accNo'
          label='银行卡号'
          required
          rules={{
            custom: val => {
              console.log("val", val);
              const regex = /^\d{12,19}$/;
              const isValid = regex.test(val);
              return isValid;
            },
            message: "请输入正确的银行卡号"
          }}
        >
          <Input placeholder='请输入' placeholderStyle='color: rgb(255,255,255,0.4)' />
        </FormItem>
      </Form>
      <Button onClick={onSubmit}>确认</Button>
    </Wrapper>
  );
};

Form 组件属性

属性名	类型	默认值	必填	描述
formRef	Ref<Form>	-	否	组件的操作实体
children	ReactElement | ReactElement[] | boolean | (boolean | ReactElement)[]	-	否	组件子组件
initFields	{ [key: string]: any }	-	否	组件初始化值
itemHeight	string	-	否	表单项高度
labelSize	string	-	否	表单项标签大小
labelColor	string	-	否	表单项标签颜色
errorColor	string	-	否	表单错误显示颜色
disabled	boolean	-	否	表单是否禁用
layout	"normal" | "between"	between	否	表单布局
errorAligin	"left" | "right"	right	否	错误显示布局
hiddenRequiredIcon	boolean	-	否	是否隐藏必填的图标
requiredIconStyle	CSSProperties	-	否	必填图标的样式

FormItem 组件属性

属性名	类型	默认值	必填	描述
name	string	-	是	表单项的唯一标识
rules	RuleType | RuleType[]	-	否	表单校验规则
children	ReactElement	-	是	组件子组件
itemHeight	string	-	否	表单项高度
label	string	-	否	表单项标签
labelSize	string	-	否	表单项标签大小
labelColor	string	-	否	表单项标签颜色
errorColor	string	-	否	表单错误显示颜色
required	boolean	false	否	表单是否必填
disabled	boolean	false	否	表单是否禁用
layout	"normal" | "between"	between	否	表单布局
errorAligin	"left" | "right"	right	否	错误显示布局
hiddenRequiredIcon	boolean	-	否	是否隐藏必填的图标
requiredIconStyle	CSSProperties	-	否	必填图标的样式

RuleType 属性

属性名	类型	默认值	必填	描述
type	"email" | "phone" | "idCard"	-	否	内置的表单校验类型
message	string	-	否	校验失败报错内容
custom	(val: any) => boolean	-	否	自定义报错校验规则

Form 组件事件

属性名	参数	必填	描述
onChange	-	否	表单更新事件