---
title: 动态增删Form组件
sidemenu: true
---

## 动态增删Form组件

动态增删Form组件
允许主动触发校验。ref?.current?.validateFields()
```tsx
/**
 * background: '#f0f2f5'
 */
import React, { useEffect } from 'react';
import { useDispatch } from 'umi';
import { Space,Input } from 'antd';
import { DynamicForm } from '@/components';

export default () => {
  const dispatch = useDispatch();

  const defaultValue = [
    {
      first:'first1',
      second:'second1',
      placeholder: 'third placeholder1'
    },
    {
     first:'first2',
     second:'second2',
      placeholder: 'third placeholder2'
    }
  ];
  const [value, setValue] = React.useState([]);
  return (
    <>
      <Space direction="vertical" style={{ width: '100%' }}>
        有默认值 readOnly
        <DynamicForm readOnly value={defaultValue} onChange={(val) => {
          console.log(val);
        }}>
          <Input placeholder="please input" name="first"/>
          <Input placeholder="please input" name="second" />
          {(item, index)=><Input placeholder={item?.placeholder} name="third" />}
        </DynamicForm>
        无默认值 changeCleans=["second"]
        <DynamicForm  value={value} onChange={setValue}>
          <Input placeholder="please input" name="first" label="first" rules={[{ required: false}]} changeCleans={["second"]} />
          <Input placeholder="please input" name="second" label="sec" rules={[{ required: true, message: '请输入' }]} />
        </DynamicForm>

        无默认值单children
        <DynamicForm value={value} onChange={setValue}>
          <Input placeholder="please input" name="second" label="sec" rules={[{ required: true, message: '请输入' }]} />
        </DynamicForm>
      </Space>
    </>
  );
};
```

<API src="./index.tsx"></API>