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.