en-US

The simplest usage.

zh-CN

最简单的用法。

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

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

  return (
    <DForm dUpdate={updateForm} dLabelWidth={120}>
      <DForm.Group dFormGroup={form}>
        <DForm.Item dFormControls={{ username: 'Please input your username!' }} dLabel="Username">
          {({ username }) => <DInput dFormControl={username} dPlaceholder="Username" />}
        </DForm.Item>
        <DForm.Item dFormControls={{ password: 'Please input your password!' }} dLabel="Password">
          {({ password }) => <DInput dFormControl={password} dPlaceholder="Password" dType="password" />}
        </DForm.Item>
        <DForm.Item>
          <DButton type="submit" disabled={!form.valid}>
            Submit
          </DButton>
        </DForm.Item>
      </DForm.Group>
    </DForm>
  );
}