Skip to content

Commit 4d6627d

Browse files
tangjinzhoutangjinzhou
committed
docs: update form demo
1 parent 3a49503 commit 4d6627d

File tree

4 files changed

+55
-30
lines changed

4 files changed

+55
-30
lines changed

‎components/form/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,20 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
569569
</div>
570570
</div>
571571
</div>
572+
<div class="ant-row ant-form-item">
573+
<div class="ant-col-6 ant-form-item-label"><label for="checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
574+
<div class="ant-col-14 ant-form-item-control-wrapper">
575+
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>A</span></label></div>
576+
<div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>B</span></label></div>
577+
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>C</span></label></div>
578+
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>D</span></label></div>
579+
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>E</span></label></div>
580+
</div>
581+
</div></span>
582+
<!---->
583+
</div>
584+
</div>
585+
</div>
572586
<div class="ant-row ant-form-item">
573587
<div class="ant-col-6 ant-form-item-label"><label for="rate" title="Rate" class="">Rate</label></div>
574588
<div class="ant-col-14 ant-form-item-control-wrapper">
@@ -691,27 +705,24 @@ exports[`renders ./components/form/demo/validate-static.vue correctly 1`] = `
691705
</div>
692706
</div>
693707
</div>
694-
<div class="ant-row ant-form-item">
708+
<div class="ant-row ant-form-item" style="margin-bottom: 0px;">
695709
<div class="ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="inline" class="">inline</label></div>
696710
<div class="ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
697-
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-col-11"><div class="ant-row ant-form-item ant-form-item-with-help"><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control has-error"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
711+
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row ant-form-item ant-form-item-with-help" style="display: inline-block;"><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control has-error"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
698712
<div class="ant-form-explain show-help-enter">Please select the correct date</div>
699713
</div>
700714
</div>
701-
</div>
702-
</div>
703-
<div class="ant-col-2"><span style="display: inline-block; width: 100%; text-align: center;">
704-
-
705-
</span></div>
706-
<div class="ant-col-11">
707-
<div class="ant-row ant-form-item">
708-
<div class="ant-form-item-control-wrapper">
709-
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
710-
<!---->
711-
</div>
715+
</div><span style="display: inline-block; width: 24px; text-align: center;">
716+
-
717+
</span>
718+
<div class="ant-row ant-form-item" style="display: inline-block;">
719+
<div class="ant-form-item-control-wrapper">
720+
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
721+
<!---->
712722
</div>
713723
</div>
714-
</div></span>
724+
</div>
725+
</span>
715726
<!---->
716727
</div>
717728
</div>

‎components/form/demo/validate-other.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,21 @@ Demostration for validataion configuration for form controls which are not show
9696
</a-radio-group>
9797
</a-form-item>
9898

99+
<a-form-item
100+
v-bind="formItemLayout"
101+
label='Checkbox.Group'
102+
>
103+
<a-checkbox-group style="width: 100%;" v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]">
104+
<a-row>
105+
<a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
106+
<a-col :span="8"><a-checkbox disabled value="B">B</a-checkbox></a-col>
107+
<a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
108+
<a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
109+
<a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
110+
</a-row>
111+
</a-checkbox-group>
112+
</a-form-item>
113+
99114
<a-form-item
100115
v-bind="formItemLayout"
101116
label='Rate'

‎components/form/demo/validate-static.vue

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -127,22 +127,21 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
127127
label='inline'
128128
:labelCol="labelCol"
129129
:wrapperCol="wrapperCol"
130+
style="margin-bottom:0;"
130131
>
131-
<a-col :span="11">
132-
<a-form-item validateStatus='error' help='Please select the correct date'>
133-
<a-date-picker style="width: 100%"/>
134-
</a-form-item>
135-
</a-col>
136-
<a-col :span="2">
137-
<span :style="{ display: 'inline-block', width: '100%', textAlign: 'center' }">
138-
-
139-
</span>
140-
</a-col>
141-
<a-col :span="11">
142-
<a-form-item>
143-
<a-date-picker style="width: 100%"/>
144-
</a-form-item>
145-
</a-col>
132+
<a-form-item
133+
validateStatus='error'
134+
help='Please select the correct date'
135+
:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
136+
>
137+
<a-date-picker style="width: 100%"/>
138+
</a-form-item>
139+
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
140+
-
141+
</span>
142+
<a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
143+
<a-date-picker style="width: 100%"/>
144+
</a-form-item>
146145
</a-form-item>
147146

148147
<a-form-item

‎components/form/index.en-US.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ If the form has been decorated by `Form.create` then it has `this.form` property
6767
| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
6868
| isFieldValidating | Check if the specified field is being validated. | Function(name) |
6969
| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
70-
| setFields | Set value and error state of fields | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
70+
| setFields | Set value and error state of fields. | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
7171
| setFieldsValue | Set the value of a field. | Function({ [fieldName]&#x3A; value } |
7272
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields. | (<br />&nbsp;&nbsp;\[fieldNames: string\[]],<br />&nbsp;&nbsp;\[options: object\],<br />&nbsp;&nbsp;callback(errors, values)<br />) => void |
7373
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |

0 commit comments

Comments
 (0)