-
-
Notifications
You must be signed in to change notification settings - Fork 53k
Closed
Labels
Description
https://ant.design/components/form-cn
[DOM] Found 2 elements with non-unique id #error: (More info: https://goo.gl/9p2vKq) <input type="text" placeholder="unavailable choice" id="error" class="ant-input">…</input>#shadow-root (user-agent)</input> <input type="text" placeholder="unavailable choice" id="error" class="ant-input">…</input>
/components/form-cn/#header:1 [DOM] Found 2 elements with non-unique id #nickname: (More info: https://goo.gl/9p2vKq) <input type="text" value id="nickname" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input> <input type="text" placeholder="Please input your nickname" value id="nickname" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input>
/components/form-cn/#header:1 [DOM] Found 3 elements with non-unique id #password: (More info: https://goo.gl/9p2vKq) <input type="password" placeholder="Password" value id="password" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input> <input type="password" placeholder="Password" value id="password" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input> <input type="password" value id="password" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input>
/components/form-cn/#header:1 [DOM] Found 2 elements with non-unique id #userName: (More info: https://goo.gl/9p2vKq) <input type="text" placeholder="Username" value id="userName" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input> <input type="text" placeholder="Username" value id="userName" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input>
/components/form-cn/#header:1 [DOM] Found 2 elements with non-unique id #username: (More info: https://goo.gl/9p2vKq) <input type="text" value="benjycui" id="username" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input> <input type="text" placeholder="Please input your name" value id="username" data-__meta="[object Object]" data-__field="[object Object]" class="ant-input">…</input>
/components/form-cn/#header:1 [DOM] Found 2 elements with non-unique id #warning: (More info: https://goo.gl/9p2vKq)
loia5tqd001
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
danedavid commentedon Apr 24, 2018
well, assigning different
id
s likeuserName1
will look bad in the docs, won't it ?crazyair commentedon May 15, 2018
+1
America-first-melon commentedon Sep 12, 2018
没人解决这个吗?
afc163 commentedon Sep 12, 2018
现阶段很难解决,除非给 form 加 id。
America-first-melon commentedon Sep 12, 2018
找到了其他的解决方法,这个情况不是很常见。谢谢
zombieJ commentedon Sep 12, 2018
这样如何?
转换成:
crazyair commentedon Sep 12, 2018
想法是好的,但是这是庞大的工作量。
如果真要给 form 加 id ,那还可以顺带把一个组件可以用多个 form 给支持了。
afc163 commentedon Sep 12, 2018
@qq645381995 react-component/form#190 社区已经加上这个支持了,antd 也快了。
afc163 commentedon Sep 12, 2018
@zombieJ 对,差不多这样。
afc163 commentedon Nov 2, 2018
Form 最好有个默认 id,尽可能避免覆盖全局变量:#12937。
ddzy commentedon Nov 28, 2018
+1
vylan commentedon Dec 10, 2018
在处理动画时也遇到了这个问题,期待给每个Formitem一个全局唯一的id
set form id on demo
zhutiancheng2 commentedon Jun 24, 2019
默默的问一下,现在这个问题解决了么=-=
afc163 commentedon Jun 24, 2019
@zhutiancheng2 给 Form 加个 name 就行了。react-component/form#197
Please add name to different Form:
spipatpunlop commentedon Jun 16, 2020
@afc163 I got just one form and I tried to add name. Warning still appeared. Thank you.
afc163 commentedon Jun 16, 2020
@spipatpunlop Please provider codesandbox to reproduce.
lishaoh commentedon Jul 9, 2020
@afc163 我也是遇到了这种情况,给form加了name或者id还是出现warning
"antd": "^3.25.2",
bihongbin3027 commentedon Aug 14, 2020
升级版本试试 我刚加了name 确实解决了这个问题
bellbellu commentedon Sep 29, 2020
4.2.0版本,也是遇到了这个问题,Form上加name也出现问题

Haley-Zhu commentedon Dec 18, 2020
You need to make sure each form have unique name.
Like '<Form name='msgForm1 />', '<Form name='msgForm2 />'
YazRae commentedon Apr 29, 2023
if you are using the same form multiple times in the same component for different reason this could happen, a condition must be considered every time the form component renders, like below:
export default function Form({ updateForm = false }) { return ( <> <Form.Item label="Name" name={updateForm ? "nameUpdate" : "name"} rules={[ { required: true, message: "Please input your Name!", }, ]} > <Input autoComplete="off" /> </Form.Item> </> ); }