en-US

Disabled form items will not participate in verification.

zh-CN

禁用的表单项不会参与校验。

import { useState } from 'react';

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

export default function Demo() {
  const [disabled, setDisabled] = useState(false);

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

  return (
    <>
      <DRadio.Group
        dList={[false, true].map((disabled) => ({
          label: disabled ? 'Disabled' : 'No disabled',
          value: disabled,
        }))}
        dModel={disabled}
        dType="outline"
        onModelChange={(disabled) => {
          setDisabled(disabled);
          if (disabled) {
            form.get('username').disable();
            updateForm();
          } else {
            form.get('username').enable();
            updateForm();
          }
        }}
      />
      <br />
      <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>
    </>
  );
}