en-US

DForm.Item supports dLabelExtra to configure extra information, DForm supports dRequiredType to set required styles globally.

zh-CN

DForm.Item 支持 dLabelExtra 配置额外信息，DForm 支持 dRequiredType 全局设置必填样式。

import { useState } from 'react';

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

export default function Demo() {
  const [label, setLabel] = useState('required');

  const [form1, updateForm1] = useForm(
    () =>
      new FormGroup({
        username1: new FormControl(''),
        username2: new FormControl('', Validators.required),
      })
  );
  const [form2, updateForm2] = useForm(
    () =>
      new FormGroup({
        username1: new FormControl(''),
        username2: new FormControl(''),
      })
  );

  return (
    <>
      <DRadio.Group
        dList={['required', 'optional', 'hidden'].map((label) => ({
          label: label,
          value: label,
        }))}
        dModel={label}
        dType="outline"
        onModelChange={setLabel}
      />
      <br />
      <DForm dUpdate={updateForm1} dLayout="vertical" dRequiredType={label}>
        <DForm.Group dFormGroup={form1}>
          <DForm.Item dFormControls={{ username1: 'Please input your username!' }} dLabel="Username">
            {({ username1 }) => <DInput dFormControl={username1} dPlaceholder="Username" />}
          </DForm.Item>
          <DForm.Item dFormControls={{ username2: 'Please input your username!' }} dLabel="Username">
            {({ username2 }) => <DInput dFormControl={username2} dPlaceholder="Username" />}
          </DForm.Item>
        </DForm.Group>
      </DForm>
      <br />
      <DForm dUpdate={updateForm2} dLayout="vertical" dRequiredType={label}>
        <DForm.Group dFormGroup={form2}>
          <DForm.Item
            dFormControls={{ username1: 'Please input your username!' }}
            dLabel="Username"
            dLabelExtra={[{ title: 'Some info!' }]}
          >
            {({ username1 }) => <DInput dFormControl={username1} dPlaceholder="Username" />}
          </DForm.Item>
          <DForm.Item
            dFormControls={{ username2: 'Please input your username!' }}
            dLabel="Username"
            dLabelExtra={['Info', { title: 'Some info!', icon: <SearchOutlined /> }]}
          >
            {({ username2 }) => <DInput dFormControl={username2} dPlaceholder="Username" />}
          </DForm.Item>
        </DForm.Group>
      </DForm>
    </>
  );
}