CODEWITHSUNDEEP
htmlreactjsantd
SMTP King
SMTP King

Reputation: 528

Cannot set required attribute to antd design form element

The required field doesn't work for the antd design component. The form, therefore, submits the code below:

    <div className="col-md-12 text-center" style={{ backgroundColor: "#bdc5ff" }}>
        <Form.Item rules={[{ required: true }]}>
            <Form.Item name="dragger" valuePropName="fileList" noStyle rules={[{ required: true }]}>
                <Upload.Dragger
                    onChange={(e) => handleInputChange("file", e.file)}
                    beforeUpload={() => false}
                    name="files"
                    accept=".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp"
                    action=""
                    rules={[{ required: true }]}
                >
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                    </p>
                    <p className="text-dark">Click or drag file to this area to upload</p>
                    <p className="text-muted">Support for PNG, JPG, GIF up to 10MB.</p>
                </Upload.Dragger>
            </Form.Item>
        </Form.Item>
    </div>

In the doc here https://ant.design/components/form/v3 this should have worked I am using the regular HTML form also

Upvotes: 0

Views: 1968

Answers (1)

Ved
Ved

Reputation: 1028

You can to put form.item inside a Form component and add a submit button, below code will display "Please select a image" when you submit the form before uploading a image

   <div
  className="col-md-12 text-center"
  style={{ backgroundColor: '#bdc5ff' }}
>
  <Form>
    <Form.Item>
      <Form.Item
        name="dragger"
        valuePropName="fileList"
        noStyle
        rules={[{ required: true, message: 'Please select a image' }]}
      >
        <Upload.Dragger
          onChange={(e) => handleInputChange('file', e.file)}
          beforeUpload={() => false}
          name="files"
          accept=".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp"
          action=""
        >
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="text-dark">
            Click or drag file to this area to upload
          </p>
          <p className="text-muted">
            Support for PNG, JPG, GIF up to 10MB.
          </p>
        </Upload.Dragger>
      </Form.Item>
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
</div>

Upvotes: 1

Related Questions