en-US

The form supports asynchronous validation.

zh-CN

表单支持异步校验。

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

const asyncValidatorFn = (control) => {
  return new Promise((r) => {
    setTimeout(() => {
      if (control.value.length > 5) {
        r({ maxLength: true });
      } else if (control.value.length > 0) {
        r(null);
      } else {
        r({ required: true });
      }
    }, 1000);
  });
};

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

  return (
    <DForm dUpdate={updateForm} dLabelWidth={120} dFeedbackIcon>
      <DForm.Group dFormGroup={form}>
        <DForm.Item
          dFormControls={{
            username: {
              required: 'Please input your username!',
              maxLength: {
                message: 'Maximum length is 5!',
                status: 'warning',
              },
            },
          }}
          dLabel="Username"
        >
          {({ username }) => <DInput dFormControl={username} dPlaceholder="Asynchronous verification" />}
        </DForm.Item>
      </DForm.Group>
    </DForm>
  );
}