Skip to content

Commit 313d5a4

Browse files
tangjinzhoutangjinzhou
committed
fix: form id error #4582
close #4582
1 parent 66dbc0f commit 313d5a4

File tree

3 files changed

+28
-28
lines changed

3 files changed

+28
-28
lines changed

‎components/form/FormItem.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
6666
};
6767
}
6868
export const formItemProps = {
69-
id: PropTypes.string,
7069
htmlFor: PropTypes.string,
7170
prefixCls: PropTypes.string,
7271
label: PropTypes.VNodeChild,
@@ -92,6 +91,10 @@ export const formItemProps = {
9291
export type FormItemProps = Partial<ExtractPropTypes<typeof formItemProps>>;
9392

9493
let indexGuid = 0;
94+
95+
// default form item id prefix.
96+
const defaultItemNamePrefixCls = 'form_item';
97+
9598
export default defineComponent({
9699
name: 'AFormItem',
97100
mixins: [BaseMixin],
@@ -114,15 +117,12 @@ export default defineComponent({
114117
return getNamePath(val);
115118
});
116119
const fieldId = computed(() => {
117-
const { id } = props;
118-
if (id) {
119-
return id;
120-
} else if (!namePath.value.length) {
120+
if (!namePath.value.length) {
121121
return undefined;
122122
} else {
123123
const formName = formContext.name.value;
124124
const mergedId = namePath.value.join('_');
125-
return formName ? `${formName}_${mergedId}` : mergedId;
125+
return formName ? `${formName}_${mergedId}` : `${defaultItemNamePrefixCls}_${mergedId}`;
126126
}
127127
});
128128
const fieldValue = computed(() => {

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

+18-18
Original file line numberDiff line numberDiff line change
@@ -464,25 +464,25 @@ exports[`renders ./components/form/demo/nested-form.vue correctly 1`] = `
464464
<div>
465465
<form class="ant-form ant-form-horizontal">
466466
<div class="ant-row ant-form-item">
467-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="name" class="ant-form-item-required" title="Activity name">Activity name
467+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_name" class="ant-form-item-required" title="Activity name">Activity name
468468
<!---->
469469
</label></div>
470470
<div class="ant-col ant-col-14 ant-form-item-control">
471471
<div class="ant-form-item-control-input">
472-
<div class="ant-form-item-control-input-content"><input type="text" id="name" class="ant-input"></div>
472+
<div class="ant-form-item-control-input-content"><input type="text" id="form_item_name" class="ant-input"></div>
473473
<!---->
474474
</div>
475475
<!---->
476476
<!---->
477477
</div>
478478
</div>
479479
<div class="ant-row ant-form-item">
480-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="sub_name" class="ant-form-item-required" title="Sub name">Sub name
480+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_sub_name" class="ant-form-item-required" title="Sub name">Sub name
481481
<!---->
482482
</label></div>
483483
<div class="ant-col ant-col-14 ant-form-item-control">
484484
<div class="ant-form-item-control-input">
485-
<div class="ant-form-item-control-input-content"><input type="text" id="sub_name" class="ant-input"></div>
485+
<div class="ant-form-item-control-input-content"><input type="text" id="form_item_sub_name" class="ant-input"></div>
486486
<!---->
487487
</div>
488488
<!---->
@@ -752,20 +752,20 @@ exports[`renders ./components/form/demo/useForm-trigger.vue correctly 1`] = `
752752
exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
753753
<form class="ant-form ant-form-horizontal">
754754
<div class="ant-row ant-form-item">
755-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="name" class="ant-form-item-required" title="Activity name">Activity name
755+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_name" class="ant-form-item-required" title="Activity name">Activity name
756756
<!---->
757757
</label></div>
758758
<div class="ant-col ant-col-14 ant-form-item-control">
759759
<div class="ant-form-item-control-input">
760-
<div class="ant-form-item-control-input-content"><input type="text" id="name" class="ant-input"></div>
760+
<div class="ant-form-item-control-input-content"><input type="text" id="form_item_name" class="ant-input"></div>
761761
<!---->
762762
</div>
763763
<!---->
764764
<!---->
765765
</div>
766766
</div>
767767
<div class="ant-row ant-form-item">
768-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="region" class="ant-form-item-required" title="Activity zone">Activity zone
768+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_region" class="ant-form-item-required" title="Activity zone">Activity zone
769769
<!---->
770770
</label></div>
771771
<div class="ant-col ant-col-14 ant-form-item-control">
@@ -774,7 +774,7 @@ exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
774774
<div class="ant-select ant-select-single ant-select-show-arrow">
775775
<!---->
776776
<!---->
777-
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="region" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="region_list" aria-autocomplete="list" aria-controls="region_list" aria-activedescendant="region_list_0" readonly="" unselectable="on" type="search"></span>
777+
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="form_item_region" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="form_item_region_list" aria-autocomplete="list" aria-controls="form_item_region_list" aria-activedescendant="form_item_region_list_0" readonly="" unselectable="on" type="search"></span>
778778
<!----><span class="ant-select-selection-placeholder">please select your zone</span>
779779
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
780780
<!---->
@@ -787,15 +787,15 @@ exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
787787
</div>
788788
</div>
789789
<div class="ant-row ant-form-item">
790-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="date1" class="ant-form-item-required" title="Activity time">Activity time
790+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_date1" class="ant-form-item-required" title="Activity time">Activity time
791791
<!---->
792792
</label></div>
793793
<div class="ant-col ant-col-14 ant-form-item-control">
794794
<div class="ant-form-item-control-input">
795795
<div class="ant-form-item-control-input-content">
796796
<!---->
797797
<div class="ant-picker" style="width: 100%;">
798-
<div class="ant-picker-input"><input id="date1" readonly="" placeholder="Pick a date" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
798+
<div class="ant-picker-input"><input id="form_item_date1" readonly="" placeholder="Pick a date" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
799799
<!---->
800800
</div>
801801
</div>
@@ -807,12 +807,12 @@ exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
807807
</div>
808808
</div>
809809
<div class="ant-row ant-form-item">
810-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="delivery" class="" title="Instant delivery">Instant delivery
810+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_delivery" class="" title="Instant delivery">Instant delivery
811811
<!---->
812812
</label></div>
813813
<div class="ant-col ant-col-14 ant-form-item-control">
814814
<div class="ant-form-item-control-input">
815-
<div class="ant-form-item-control-input-content"><button id="delivery" type="button" role="switch" aria-checked="false" class="ant-switch">
815+
<div class="ant-form-item-control-input-content"><button id="form_item_delivery" type="button" role="switch" aria-checked="false" class="ant-switch">
816816
<!----><span class="ant-switch-inner"><!----></span>
817817
</button></div>
818818
<!---->
@@ -822,13 +822,13 @@ exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
822822
</div>
823823
</div>
824824
<div class="ant-row ant-form-item">
825-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="type" class="ant-form-item-required" title="Activity type">Activity type
825+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_type" class="ant-form-item-required" title="Activity type">Activity type
826826
<!---->
827827
</label></div>
828828
<div class="ant-col ant-col-14 ant-form-item-control">
829829
<div class="ant-form-item-control-input">
830830
<div class="ant-form-item-control-input-content">
831-
<div class="ant-checkbox-group" id="type"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>Online</span></label><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>Promotion</span></label><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>Offline</span></label></div>
831+
<div class="ant-checkbox-group" id="form_item_type"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>Online</span></label><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>Promotion</span></label><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>Offline</span></label></div>
832832
</div>
833833
<!---->
834834
</div>
@@ -837,13 +837,13 @@ exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
837837
</div>
838838
</div>
839839
<div class="ant-row ant-form-item">
840-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="resource" class="ant-form-item-required" title="Resources">Resources
840+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_resource" class="ant-form-item-required" title="Resources">Resources
841841
<!---->
842842
</label></div>
843843
<div class="ant-col ant-col-14 ant-form-item-control">
844844
<div class="ant-form-item-control-input">
845845
<div class="ant-form-item-control-input-content">
846-
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" id="resource"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Sponsor</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Venue</span></label></div>
846+
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" id="form_item_resource"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Sponsor</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Venue</span></label></div>
847847
</div>
848848
<!---->
849849
</div>
@@ -852,12 +852,12 @@ exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
852852
</div>
853853
</div>
854854
<div class="ant-row ant-form-item">
855-
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="desc" class="ant-form-item-required" title="Activity form">Activity form
855+
<div class="ant-col ant-col-4 ant-form-item-label"><label html-for="form_item_desc" class="ant-form-item-required" title="Activity form">Activity form
856856
<!---->
857857
</label></div>
858858
<div class="ant-col ant-col-14 ant-form-item-control">
859859
<div class="ant-form-item-control-input">
860-
<div class="ant-form-item-control-input-content"><textarea id="desc" class="ant-input"></textarea></div>
860+
<div class="ant-form-item-control-input-content"><textarea id="form_item_desc" class="ant-input"></textarea></div>
861861
<!---->
862862
</div>
863863
<!---->

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ exports[`renders ./components/mentions/demo/basic.vue correctly 1`] = `
1515
exports[`renders ./components/mentions/demo/form.vue correctly 1`] = `
1616
<form class="ant-form ant-form-horizontal">
1717
<div class="ant-row ant-form-item">
18-
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="coders" class="ant-form-item-required" title="Top coders">Top coders
18+
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="form_item_coders" class="ant-form-item-required" title="Top coders">Top coders
1919
<!---->
2020
</label></div>
2121
<div class="ant-col ant-col-18 ant-form-item-control">
2222
<div class="ant-form-item-control-input">
2323
<div class="ant-form-item-control-input-content">
24-
<div class="ant-mentions"><textarea rows="1" id="coders"></textarea>
24+
<div class="ant-mentions"><textarea rows="1" id="form_item_coders"></textarea>
2525
<!---->
2626
</div>
2727
</div>
@@ -32,13 +32,13 @@ exports[`renders ./components/mentions/demo/form.vue correctly 1`] = `
3232
</div>
3333
</div>
3434
<div class="ant-row ant-form-item">
35-
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="bio" class="ant-form-item-required" title="Bio">Bio
35+
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="form_item_bio" class="ant-form-item-required" title="Bio">Bio
3636
<!---->
3737
</label></div>
3838
<div class="ant-col ant-col-18 ant-form-item-control">
3939
<div class="ant-form-item-control-input">
4040
<div class="ant-form-item-control-input-content">
41-
<div class="ant-mentions"><textarea rows="3" placeholder="You can use @ to ref user here" id="bio"></textarea>
41+
<div class="ant-mentions"><textarea rows="3" placeholder="You can use @ to ref user here" id="form_item_bio"></textarea>
4242
<!---->
4343
</div>
4444
</div>

0 commit comments

Comments
 (0)