en-US

Use dErrors to adapt to more complex scenarios.

zh-CN

通过 dErrors 来适应更复杂的场景。

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

export default function Demo() {
  const [form, updateForm] = useForm(
    () =>
      new FormGroup({
        username1: new FormControl('', Validators.required),
        username2: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(12)]),
        username3: new FormControl('', Validators.required),
        username4: new FormControl('', [Validators.required, Validators.minLength(5)]),
      })
  );

  return (
    <DForm style={{ minWidth: 800 }} dUpdate={updateForm} dLabelWidth={120}>
      <DForm.Group dFormGroup={form}>
        <DForm.Item
          dFormControls={{
            username1: {
              message: 'Please input your username!',
              status: 'warning',
            },
          }}
          dLabel="Username"
        >
          {({ username1 }) => <DInput dFormControl={username1} dPlaceholder="warning" />}
        </DForm.Item>
        <DForm.Item
          dFormControls={{
            username2: {
              required: 'Please input your username!',
              minLength: 'Minimum length is 5!',
              maxLength: 'Maximum length is 12!',
            },
          }}
          dLabel="Username"
        >
          {({ username2 }) => <DInput dFormControl={username2} dPlaceholder="required, minLength:5, maxLength:12" />}
        </DForm.Item>
        <DForm.Item
          dFormControls={{
            username3: 'Please input your username3!',
            username4: {
              required: 'Please input your username4!',
              minLength: {
                message: 'Minimum length is 5!',
                status: 'warning',
              },
            },
          }}
          dLabel="Username"
        >
          {({ username3, username4 }) => (
            <DCompose>
              <DInput style={{ width: '50%' }} dFormControl={username3} dPlaceholder="error" />
              <DInput style={{ width: '50%' }} dFormControl={username4} dPlaceholder="required, minLength:warning,5" />
            </DCompose>
          )}
        </DForm.Item>
      </DForm.Group>
    </DForm>
  );
}