zent/src/form/demos/2.builtin-field.md

一套前端设计语言和基于React的实现

---
order: 2
zh-CN:
	title: 使用内置表单元素组件
	name: 昵称
	nameValidationError: 请填写昵称
	type: 类型
	typeText1: 普通用户
	typeText2: 高级用户
	typeValidationErrors: 请选择类型
	sex: 性别
	sexValidationErrors: 请选择性别
	sexText1: 男
	sexText2: 女
	tagText: 兴趣标签
	tagValidationErrors: 请选择标签
	tagText1: 电影
	tagText2: 书籍
	tagText3: 旅行
	ageText: 年龄
	colorText: 喜欢的颜色
	dateRangeText: 身份证有效期
	dateRangeValidationErrors: 请填写有效期
	isPublicText: 公开个人信息
	agreeText: 同意许可条例
	agreeCont: 是
	singleUploadText: 单文件上传
	singleUploadTips: 文件大小不超过 2M
	uploadText: 文件上传
	uploadTips: 单个文件不超过 2M
	imageUploadText: 图片文件上传
	imageUploadTips: 单个文件不超过 2M
	workTime: 工作时间
	submit: 获取表单值
en-US:
	title: Use built in field components
	name: Name
	nameValidationError: Please enter the name.
	type: Type
	typeText1: Volume
	typeText2: VIP
	typeValidationErrors: Please choose the type.
	sex: Gender
	sexValidationErrors: Please choose sex.
	sexText1: Male
	sexText2: Female
	tagText: Hobbies
	tagValidationErrors: Please choose hobbies.
	tagText1: Movie
	tagText2: Book
	tagText3: Travel
	ageText: Age
	colorText: Favorite color
	dateRangeText: Validity period
	dateRangeValidationErrors: Please select the dateRange
	isPublicText: Public information
	agreeText: All permissions
	agreeCont: agree
	singleUploadText: Single file upload
  singleUploadTips: File size no more than 2M
	uploadText: Files upload
	uploadTips: Single File no more than 2M
	imageUploadText: Image files upload
	imageUploadTips: Single File no more than 2M
	workTime: Worktime
	submit: submit
---

```jsx
import {
	Form,
	FormStrategy,
	Field,
	FormInputField,
	FormSelectField,
	FormRadioGroupField,
	FormCheckboxField,
	FormCheckboxGroupField,
	FormColorPickerField,
	FormDateRangePickerField,
	FormNumberInputField,
	FormSwitchField,
	Radio,
	Checkbox,
	Button,
	FormTimeRangePickerField,
	FormSingleUploadField,
	FormUploadField,
	FormImageUploadField,
} from 'zent';

function Component() {
	const form = Form.useForm(FormStrategy.View);
	return (
		<Form layout="horizontal" form={form}>
			<FormInputField
				name="name"
				label="{i18n.name}："
				required="{i18n.typeValidationErrors}"
				props={{
					spellCheck: false,
				}}
			/>
			<FormSelectField
				name="type"
				label="{i18n.type}："
				required
				props={{
					options: [
						{ key: 1, text: '{i18n.typeText1}' },
						{ key: 2, text: '{i18n.typeText2}' },
					],
				}}
			/>
			<FormRadioGroupField
				name="sex"
				label="{i18n.sex}："
				required
				validators={[Validators.required('{i18n.sexValidationErrors}')]}
			>
				<Radio value="1">{i18n.sexText1}</Radio>
				<Radio value="2">{i18n.sexText2}</Radio>
			</FormRadioGroupField>
			<FormCheckboxGroupField
				name="hobbies"
				label="{i18n.tagText}："
				required="{i18n.tagValidationErrors}"
				validators={[Validators.minLength(1, '{i18n.tagValidationErrors}')]}
			>
				<Checkbox value="movie">{i18n.tagText1}</Checkbox>
				<Checkbox value="book">{i18n.tagText2}</Checkbox>
				<Checkbox value="travel">{i18n.tagText3}</Checkbox>
			</FormCheckboxGroupField>
			<FormNumberInputField
				name="age"
				label="{i18n.ageText}："
				defaultValue={12}
				props={{
					showStepper: true,
				}}
			/>
			<FormColorPickerField
				name="color"
				label="{i18n.colorText}："
				defaultValue="#5197FF"
			/>
			<FormTimeRangePickerField
				name="workTime"
				label="{i18n.workTime}："
				defaultValue={['9:00:00', '18:00:00']}
			></FormTimeRangePickerField>
			<FormDateRangePickerField
				name="dateRange"
				label="{i18n.dateRangeText}："
				type="split"
				dateFormat="YYYY-MM-DD HH:mm:ss"
				validators={[
					function required(value) {
						if (!value[0] || !value[1]) {
							return {
								name: 'required',
								message: '{i18n.dateRangeValidationErrors}',
							};
						}
					},
				]}
			/>
			<FormSwitchField
				name="isPublic"
				label="{i18n.isPublicText}："
				defaultValue={false}
			/>
			<FormCheckboxField name="agree" label="{i18n.agreeText}：">
				{i18n.agreeCont}
			</FormCheckboxField>
			<FormSingleUploadField
				name="singleFile"
				label="{i18n.singleUploadText}："
				props={{
					tips: '{i18n.singleUploadTips}',
					maxSize: 1024 * 1024 * 2,
				}}
			/>
			<FormUploadField
				name="upload"
				label="{i18n.uploadText}："
				props={{
					tips: '{i18n.uploadTips}',
					maxAmount: 9,
					maxSize: 1024 * 1024 * 2,
				}}
			/>
			<FormImageUploadField
				name="imageUpload"
				label="{i18n.imageUploadText}："
				props={{
					tips: '{i18n.imageUploadTips}',
					maxAmount: 9,
					maxSize: 1024 * 1024 * 2,
				}}
			/>
			<Button
				type="primary"
				onClick={() =>
					Notify.info(
						<code>
							<pre>{JSON.stringify(form.getValue(), null, 2)}</pre>
						</code>
					)
				}
			>
				Values
			</Button>
		</Form>
	);
}

ReactDOM.render(<Component />, mountNode);
```

<style>
.zent-form__controls .zent-switch-small {
	margin-top: 5px;
}
</style>