mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
7c23e51400
* 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
58 lines
1.4 KiB
TypeScript
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;
|