ant-design/components/form/index.md
2015-10-31 08:45:36 +08:00

2.8 KiB
Raw Blame History

Form

  • category: Components
  • chinese: 表单
  • type: 表单

具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

表单

我们为 form 提供了以下两种排列方式:

  • 水平排列:可以实现 label 标签和表单控件的水平排列;
  • 行内排列:使其表现为 inline-block 级别的控件。

表单域

表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。

这里我们分别为表单域和输入控件封装了

  <Form.Item> 
    {children} 
  </Form.Item>`

<Form.Input />

API

Form

<Form
  prefixCls={string}    // 样式类名默认为 ant-form通常您不需要设置
  horizontal={bool}     // 水平排列布局
  inline={bool}         // 行内排列布局
  onSubmit={function}   // 数据验证成功后回调事件
>  
  {children}
</Form>

Form.ValueMixin

双向数据绑定,当表单控件的输入值改变时,更新 formData。

你需要为每个输入控件声明 name 属性

Form.Item

<FormItem
  prefixCls={string}        // 样式类名默认为 ant-form通常您不需要设置
  label={string|element}    // label 标签的文本
  labelClassName={string}   // label 标签样式比如设置布局样式 'col-4'。
  wrapperClassName={string} // 需要为输入控件设置布局样式时使用该属性
  help={string}             // 提示信息
  required={bool}           // 是否必填默认为 false
  hasFeedback={bool}        // 配合 validateStatus 属性使用是否展示校验状态图标默认 false
  validateStatus={'success'|'warning'|'error'|'validating'}     // 校验状态必须为 'success', 'warning', 'error', 'validating'中的一个值
>
  [<Input /> | <CheckBox> | <Select> | ...]
</FormItem>

Form.Input

<Form.Input 
  prefixCls={string}      // 样式类名前缀默认是 ant通常您不需要设置
  type={string}           // input 类型保留原生 input 标签的 type 属性值新增 static详见例子 
  value={any}             // value  
  id={number|string}      // id
  size={'large'|'small'}  // 控件大小
  defaultValue={any}      // 设置初始默认值
  disabled={bool}         // 是否禁用状态默认为 false
  addonBefore={node}      // 带标签的 input设置前置标签
  addonAfter={node}       // 带标签的 input设置后置标签
/>

Form.InputGroup

<Form.InputGroup 
  className={string}      // 样式类名前缀默认是 ant-input-group通常您不需要设置
>
  {children}
</Form.InputGroup>