Skip to content

MostFrumiousBandersnatch/eslint-plugin-antd

Repository files navigation

Collection of eslint rules for ANT Design

ESlint Licence Npm package version Tests Coverage Badge

form-item-has-single-child

Ensuring that Form.Item elements contain exactly one child

Form items are essentialy the wrappers for input controls, to connect them to the form's context, using the cloneElement under the hood. To make it happen, input control must be the only (and direct) child of form item, in all other cases form item just does not work, printing some warnings in run time. You may occsionally add an extra child element, for the UI purposes, and break your form.

Examples of incorrect code for this rule:

    <Form.Item
      label="Username"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
      <label>Fancy but harmful</label>
    </Form.Item>
    <Form.Item
      label="Password"
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <label>Fancy and harmful</label>
      <Input.Password />
    </Form.Item>

Examples of correct code for this rule:

    <Form.Item
      label="Username"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

This rule has no options.

About

Collection of eslint rules for ANT Design components

Resources

License

Stars

Watchers

Forks

Packages

No packages published