Form 表单 #

一组处理表单数据的组件和模型。

• <Form> 定义一个表单。
• <Form.Group> 表单控件组，用于表单控件布局。
• <Form.Control> 表单控件，定义一个表单字段。
• <Form.ControlLabel> 表单控件对应的标题。
• <Form.HelpText> 表单控件对应帮助信息。
• <Form.ErrorMessage> 表单控件对应的错误提示信息。

获取组件 #

布局 #

默认 #

默认为垂直布局

撑满容器 #

fluid 属性可以让表单中的 Input 100% 撑满容器，只在垂直布局中有效。

水平排列布局 #

行内排列布局 #

模态框中布局 #

状态 #

帮助说明 #

<Form.HelpText> 可以在表单组件下面定义一个帮助说明信息，如果设置 tooltip 属性，就会在表单组件显示一个图标，以 <Tooltip> 的方式显示帮助说明信息。

错误消息 #

错误消息提醒可以通过 2 种方式设定：

• <Form.Control> 组件上传递一个 errorMessage 属性设置错误信息，通过 errorPlacement设置错误信息显示的位置 。
• 自定义一个提示信息。

禁用与只读 #

无障碍设计 #

• 通过 <Form.Group> 的 controlId 属性，可以在 <Form.Control> 上设置 id 同时在 <Form.ControlLabel> 上设置 htmlFor。另外会为 <Form.Control> 生成aria-labelledby 和 aria- describeby， 对应到 <Form.ControlLabel> 与 <Form.HelpText> 的 id。

<Form.Group controlId="name">
  <Form.ControlLabel>Username</Form.ControlLabel>
  <Form.Control />
  <Form.HelpText>Username is required</Form.HelpText>
</Form.Group>

生成为:

<div class="rs-form-group" role="group">
  <label id="name-control-label" for="name" class="rs-form-control-label">Username</label>
  <div class="rs-form-control rs-form-control-wrapper">
    <input
      id="name"
      class="rs-input"
      aria-labelledby="name-control-label"
      aria-describedby="name-help-text"
    />
  </div>
  <span id="name-help-text" class="rs-form-help-text">Username is required</span>
</div>

• 在 Form 内点击 type='submit' 的按钮，会自动触发表单的 submit 事件。

Props #

<Form> #

Form methods #

• check 检验表单数据

check: (callback?: (formError: E) => void) => boolean;

• checkAsync 异步检验表单数据

checkAsync: () => Promise<any>;

• checkForField 校验表单单个字段值

checkForField: (
    fieldName: keyof T,
    callback?: (checkResult: CheckResult<errorMsg>) => void
  ) => boolean;

• checkForFieldAsync 异步校验表单单个字段值

checkForFieldAsync: (fieldName: keyof T) => Promise<CheckResult>;

• cleanErrors 清除错误信息

cleanErrors(callback: () => void) => void

• cleanErrorForField 清除单个字段错误信息

cleanErrorForField: (fieldName: keyof E, callback?: () => void) => void;

<Form.Control> #

<Form.Group> #

<Form.ControlLabel> #

<Form.HelpText> #

<Form.ErrorMessage> #

ts:Placement #

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd';