en-US

The API design comes from Angular form, which can handle various complex usage scenarios easily.

Make sure to execute updateForm() once after the modification is completed to update the form.

zh-CN

API 设计来源于 Angular form，可以轻松应对各种复杂的使用场景。

确保修改完成后执行一次 updateForm() 以更新表单。

import { useImmer } from '@react-devui/hooks';
import { MinusCircleOutlined } from '@react-devui/icons';
import { DForm, FormControl, FormGroup, Validators, useForm, DInput, DButton } from '@react-devui/ui';

let n = 1;

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

  return (
    <div style={{ minWidth: 800 }}>
      <DForm dUpdate={updateForm} dLabelWidth={120} dLayout="inline">
        <DForm.Group dFormGroup={form}>
          {formItems.map((n) => (
            <DForm.Group key={n} dFormGroup={form.get(`group${n}`)}>
              <DForm.Item dFormControls={{ username: 'Please input your username!' }} dLabel="Username" dSpan="calc(50% - 1.5em)">
                {({ username }) => <DInput dFormControl={username} dPlaceholder="Username" />}
              </DForm.Item>
              <DForm.Item dFormControls={{ password: 'Please input your password!' }} dLabel="Password" dSpan="calc(50% - 1.5em)">
                {({ password }) => <DInput dFormControl={password} dPlaceholder="Password" dType="password" />}
              </DForm.Item>
              <div style={{ display: 'flex', flex: '0 0 3em', height: 36, alignItems: 'center', justifyContent: 'center' }}>
                <DButton
                  disabled={n === 1}
                  dType="text"
                  dIcon={<MinusCircleOutlined />}
                  onClick={() => {
                    form.removeControl(`group${n}`);
                    updateForm();
                    setFormItems((draft) => {
                      const index = draft.findIndex((_n) => _n === n);
                      draft.splice(index, 1);
                    });
                  }}
                />
              </div>
            </DForm.Group>
          ))}
        </DForm.Group>
      </DForm>
      <div className="button-container">
        <DButton
          onClick={() => {
            n += 1;
            form.addControl(
              `group${n}`,
              new FormGroup({
                username: new FormControl('', Validators.required),
                password: new FormControl('', Validators.required),
              })
            );
            updateForm();
            setFormItems((draft) => {
              draft.push(n);
            });
          }}
        >
          Add
        </DButton>
        <DButton
          onClick={() => {
            form.reset();
            updateForm();
          }}
        >
          Reset
        </DButton>
        <DButton
          onClick={() => {
            formItems.forEach((n) => {
              form.get(`group${n}`).setValue({
                username: 'username' + n,
                password: 'password' + n,
              });
            });
            updateForm();
          }}
        >
          Fill
        </DButton>
        <DButton type="submit" disabled={!form.valid}>
          Submit
        </DButton>
      </div>
      <div style={{ marginTop: 20 }}>{JSON.stringify(form.value)}</div>
    </div>
  );
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}