zent/src/form/demos/3.multi-value.md

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

---
order: 3
zh-CN:
	title: 封装多个表单元素
	countyListText1: 中国 +86
	countyListText2: 中国澳门 +853
	comment1: 覆盖部分value
	contact: 联系方式
	phonePlaceholder: 请填写手机号
	contactPlaceholder: 目前仅支持中国内陆地区和澳门地区电话号码
	contactError: 请输入正确的手机号
	getFormValue: 获取表单值
	reset: 重置表单值
en-US:
	title: Package multiple form elements
	countyListText1: China +86
	countyListText2: China Macau +853
	comment1: rewrite part of value
	contact: Contact Phone
	phonePlaceholder: Enter your phone
	contactPlaceholder: Only phone numbers of China mainland and Macau are supported now.
	contactError: Please enter right phone numbers.
	getFormValue: get form values
	reset: reset 
---

```tsx
import { useCallback, useMemo } from 'react';
import {
	Form,
	Select,
	NumberInput,
	Notify,
	FormStrategy,
	FormControl,
	Button,
	FieldSet,
	FieldUtils,
	Validators,
	FormError,
} from 'zent';

const { SelectTrigger } = Select;
const countyCodeList = [
	{
		code: '+86',
		zh: 'zhongguo',
		eng: 'china',
		text: '{i18n.countyListText1}',
		key: 0,
	},
	{
		code: '+853',
		zh: 'aomen',
		eng: 'Macau',
		text: '{i18n.countyListText2}',
		key: 1,
	},
];

const filterHandler = (item, keyword) => {
	return !!(
		keyword &&
		item.text
			.trim()
			.toLowerCase()
			.indexOf(keyword.trim().toLowerCase()) > -1
	);
};

function getValue(value) {
	return value;
}

const ContactPhone = () => {
	const select = Form.useField('areacode', countyCodeList[0]);
	const input = Form.useField('mobile', '', [
		Validators.pattern(/^\d{1,10}$/, '{i18n.contactError}'),
	]);
	const onSelectChange = FieldUtils.useMulti(
		useCallback(() => {
			select.isTouched = true;
		}, [select]),
		FieldUtils.usePipe(
			getValue,
			FieldUtils.useChangeHandler(select, Form.ValidateOption.Default)
		)
	);
	const onPhoneNumChange = FieldUtils.useChangeHandler(
		input,
		Form.ValidateOption.Default
	);
	return (
		<FormControl
			className="form-demo-multiple-value"
			label="{i18n.contact}："
			invalid={!!select.error || !!input.error}
		>
			<Select
				className="areacode"
				options={countyCodeList}
				filter={filterHandler}
				trigger={SelectTrigger}
				width={160}
				value={select.value}
				onChange={onSelectChange}
			/>
			<NumberInput
				style={{ marginLeft: 16 }}
				className="phone-num"
				placeholder="{i18n.phonePlaceholder}"
				width={160}
				value={input.value}
				{...FieldUtils.useCompositionHandler(input)}
				onChange={onPhoneNumChange}
				onBlur={useCallback(() => {
					input.isTouched = true;
					input.validate();
				}, [input])}
			/>
			<Form.CombineErrors models={[select, input]} />
		</FormControl>
	);
};

const App = () => {
	const form = Form.useForm(FormStrategy.View);
	const getFormValues = useCallback(() => {
		const values = form.getValue();
		console.log(values);
	}, [form]);
	const resetForm = useCallback(() => {
		form.resetValue();
	}, [form]);
	return (
		<Form form={form} layout="horizontal">
			<FieldSet name="contactPhone">
				<ContactPhone />
			</FieldSet>
			<div className="zent-form__form-actions">
				<Button type="primary" onClick={getFormValues}>
					{i18n.getFormValue}
				</Button>{' '}
				<Button type="primary" outline onClick={resetForm}>
					{i18n.reset}
				</Button>
			</div>
		</Form>
	);
};

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

<style>
	.form-demo-multiple-value {
		& .zent-form-control-content {
			display: flex;
		}
	}
</style>