en-US

Use DForm.Group to group forms. When nesting FormGroup, DForm.Group needs to correspond to the corresponding structure.

zh-CN

通过 DForm.Group 对表单进行分组，嵌套 FormGroup 时，需要 DForm.Group 对应相应结构。

import { DForm, FormControl, FormGroup, Validators, useForm, DInput } from '@react-devui/ui';

export default function Demo() {
  const [form, updateForm] = useForm(
    () =>
      new FormGroup({
        group1: new FormGroup({
          username: new FormControl('', Validators.required),
        }),
        group2: new FormGroup({
          username: new FormControl('', Validators.required),
          group3: new FormGroup({
            username: new FormControl('', Validators.required),
          }),
        }),
      })
  );

  return (
    <DForm dUpdate={updateForm} dLabelWidth={120}>
      <DForm.Group dFormGroup={form}>
        <DForm.Group dFormGroup={form.get('group1')} dTitle={<h5>Basic Info</h5>}>
          <DForm.Item dFormControls={{ username: 'Please input your username!' }} dLabel="Username">
            {({ username }) => <DInput dFormControl={username} dPlaceholder="Username" />}
          </DForm.Item>
        </DForm.Group>
        <DForm.Group dFormGroup={form.get('group2')} dTitle={<h5>Nested group</h5>}>
          <DForm.Item dFormControls={{ username: 'Please input your username!' }} dLabel="Username">
            {({ username }) => <DInput dFormControl={username} dPlaceholder="Username" />}
          </DForm.Item>
          <DForm.Group dFormGroup={form.get(['group2', 'group3'])}>
            <DForm.Item dFormControls={{ username: 'Please input your username!' }} dLabel="Username">
              {({ username }) => <DInput dFormControl={username} dPlaceholder="Username" />}
            </DForm.Item>
          </DForm.Group>
        </DForm.Group>
      </DForm.Group>
    </DForm>
  );
}