ant-design/components/form/demo/form-dependencies.tsx
vagusX 7c23e51400
docs: fix wrong anchor for form#dependencies (#48570)
* docs: fix wrong anchor for form#dependencies

* test: update snapshot

* scripts: add new badcases to reporter

* scripts: added one

* scripts: copy new added imgs

* scripts: fix filename

* scripts: fix path

* scripts: fix src and dest
2024-04-23 15:50:48 +08:00

58 lines
1.4 KiB
TypeScript

import React from 'react';
import { Alert, Form, Input, Typography } from 'antd';
const App: React.FC = () => {
const [form] = Form.useForm();
return (
<Form
form={form}
name="dependencies"
autoComplete="off"
style={{ maxWidth: 600 }}
layout="vertical"
>
<Alert message=" Try modify `Password2` and then modify `Password`" type="info" showIcon />
<Form.Item label="Password" name="password" rules={[{ required: true }]}>
<Input />
</Form.Item>
{/* Field */}
<Form.Item
label="Confirm Password"
name="password2"
dependencies={['password']}
rules={[
{
required: true,
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('The new password that you entered do not match!'));
},
}),
]}
>
<Input />
</Form.Item>
{/* Render Props */}
<Form.Item noStyle dependencies={['password2']}>
{() => (
<Typography>
<p>
Only Update when <code>password2</code> updated:
</p>
<pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
</Typography>
)}
</Form.Item>
</Form>
);
};
export default App;