zent/src/form/demos/19.reactive-valid.md

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

---
order: 19
zh-CN:
	title: 响应式的校验状态
	field1: 字段-1
	field2: 字段-2
	item: 项目
en-US:
	title: Reactive Valid State
	field1: Field-1
	field2: Field-2
	item: Item
---

```jsx
import {
	Form,
	FormError,
	FormStrategy,
	FormControl,
	Input,
	Validators,
	FormInputField,
	FieldSet,
	Button,
	Notify,
	Alert,
} from 'zent';

const { useState, useEffect, useCallback } = React;
const { useForm, useFieldArray, useFormValid } = Form;

function App() {
	const form = useForm(FormStrategy.View);

	return (
		<Form form={form} layout="horizontal">
			<Preview form={form} />
			<FieldSet name="set">
				<FormInputField
					required
					withoutError
					name="field1"
					label="{i18n.field1}"
				/>
				<Form.FieldValid name="field1">
					{valid => (
						<FormControl label=" ">
							<div>Field-1 is {valid ? 'valid' : 'invalid'}</div>
						</FormControl>
					)}
				</Form.FieldValid>
				<FormInputField required name="field2" label="{i18n.field2}" />
			</FieldSet>
			<FieldArray />
		</Form>
	);
}

function FieldArray() {
	const model = useFieldArray('array');

	return (
		<>
			{model.children.map((child, index) => {
				return (
					<div key={child.id}>
						<FormInputField
							required
							model={child}
							label="{i18n.item}"
							props={{
								addonAfter: (
									<Icon
										type="close"
										style={{ cursor: 'pointer' }}
										onClick={() => model.splice(index, 1)}
									/>
								),
							}}
						/>
					</div>
				);
			})}
			<Button type="primary" onClick={() => model.push('')}>
				Add
			</Button>
		</>
	);
}

function Preview({ form }) {
	// You will see a warning about performance issues in console.
	// Only do this if you know what you are doing.
	const valid = useFormValid(form);

	return (
		<Alert type={valid ? 'success' : 'error'} style={{ marginBottom: 24 }}>
			Form is {valid ? 'valid' : 'invalid'}
		</Alert>
	);
}

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