docs: 📝 Add Form.Item hidden in doc

close #25101
ant-design · Jun 19, 2020 · 771ee65 · 771ee65
1 parent 93ca6e7
commit 771ee65
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 0 deletions.
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
@@ -49,6 +49,7 @@ export interface FormItemProps extends FormItemLabelProps, FormItemInputProps, R
   hasFeedback?: boolean;
   validateStatus?: ValidateStatus;
   required?: boolean;
+  hidden?: boolean;
 
   /** Auto passed by List render props. User should not use this. */
   fieldKey?: React.Key | React.Key[];
@@ -80,6 +81,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
     label,
     trigger = 'onChange',
     validateTrigger,
+    hidden,
     ...restProps
   } = props;
   const destroyRef = React.useRef(false);
@@ -184,6 +186,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
       [`${prefixCls}-item-has-error-leave`]:
         !help && domErrorVisible && prevValidateStatusRef.current === 'error',
       [`${prefixCls}-item-is-validating`]: mergedValidateStatus === 'validating',
+      [`${prefixCls}-hidden`]: hidden,
     };
 
     // ======================= Children =======================

diff --git a/components/form/__tests__/__snapshots__/index.test.js.snap b/components/form/__tests__/__snapshots__/index.test.js.snap
@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Form Form item hidden 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-row ant-form-item ant-form-hidden"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            id="light"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`] = `
 <form
   class="ant-form ant-form-horizontal"

diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
@@ -597,4 +597,15 @@ describe('Form', () => {
 
     expect(wrapper.find('input').prop('onBlur')).toBeTruthy();
   });
+
+  it('Form item hidden', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="light" hidden>
+          <Input />
+        </Form.Item>
+      </Form>,
+    );
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
 });
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
@@ -95,6 +95,7 @@ Form field component for data bidirectional binding, validation, layout, and so
 | validateTrigger | When to validate the value of children node | string \| string[] | `onChange` |  |
 | valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` |  |
 | wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - |  |
+| hidden | whether to hide Form.Item (still collect and validate value) | boolean | false |  |
 
 After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
 

diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
@@ -96,6 +96,7 @@ const validateMessages = {
 | validateTrigger | 设置字段校验的时机 | string \| string[] | `onChange` |  |
 | valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` |  |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准。 | [object](/components/grid/#Col) | - |  |
+| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false |  |
 
 被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
 

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -66,6 +66,10 @@
     margin-bottom: 0;
   }
 
+  &-hidden {
+    display: none;
+  }
+
   // ==============================================================
   // =                            Label                           =
   // ==============================================================