Skip to content

form demo element id not unique  #10218

@paranoidjk

Description

@paranoidjk
Contributor

https://ant.design/components/form-cn

2018-04-24 12 27 19

[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) 

Activity

danedavid

danedavid commented on Apr 24, 2018

@danedavid
Contributor

well, assigning different ids like userName1 will look bad in the docs, won't it ?

crazyair

crazyair commented on May 15, 2018

@crazyair
Member

+1

America-first-melon

America-first-melon commented on Sep 12, 2018

@America-first-melon

没人解决这个吗?

afc163

afc163 commented on Sep 12, 2018

@afc163
Member

现阶段很难解决,除非给 form 加 id。

America-first-melon

America-first-melon commented on Sep 12, 2018

@America-first-melon

找到了其他的解决方法,这个情况不是很常见。谢谢

zombieJ

zombieJ commented on Sep 12, 2018

@zombieJ
Member

@afc163 :
现阶段很难解决,除非给 form 加 id。

这样如何?

<Form id="abc">
...
</Form>

转换成:

<form id="abc">
  <input id="abc_name" />
</form>
crazyair

crazyair commented on Sep 12, 2018

@crazyair
Member

想法是好的,但是这是庞大的工作量。
如果真要给 form 加 id ,那还可以顺带把一个组件可以用多个 form 给支持了。

afc163

afc163 commented on Sep 12, 2018

@afc163
Member

顺带把一个组件可以用多个 form 给支持了。

@qq645381995 react-component/form#190 社区已经加上这个支持了,antd 也快了。

afc163

afc163 commented on Sep 12, 2018

@afc163
Member

@zombieJ 对,差不多这样。

afc163

afc163 commented on Nov 2, 2018

@afc163
Member

Form 最好有个默认 id,尽可能避免覆盖全局变量:#12937

ddzy

ddzy commented on Nov 28, 2018

@ddzy

没人解决这个吗?

+1

vylan

vylan commented on Dec 10, 2018

@vylan

在处理动画时也遇到了这个问题,期待给每个Formitem一个全局唯一的id

added a commit that references this issue on Dec 17, 2018
83b449b
zhutiancheng2

zhutiancheng2 commented on Jun 24, 2019

@zhutiancheng2

默默的问一下,现在这个问题解决了么=-=

afc163

afc163 commented on Jun 24, 2019

@afc163
Member

@zhutiancheng2 给 Form 加个 name 就行了。react-component/form#197

Please add name to different Form:

<Form name="form1" />
<Form name="form2" />
spipatpunlop

spipatpunlop commented on Jun 16, 2020

@spipatpunlop

@afc163 I got just one form and I tried to add name. Warning still appeared. Thank you.

afc163

afc163 commented on Jun 16, 2020

@afc163
Member

@spipatpunlop Please provider codesandbox to reproduce.

lishaoh

lishaoh commented on Jul 9, 2020

@lishaoh

@afc163 我也是遇到了这种情况,给form加了name或者id还是出现warning

"antd": "^3.25.2",

bihongbin3027

bihongbin3027 commented on Aug 14, 2020

@bihongbin3027

升级版本试试 我刚加了name 确实解决了这个问题

bellbellu

bellbellu commented on Sep 29, 2020

@bellbellu

4.2.0版本,也是遇到了这个问题,Form上加name也出现问题
image

Haley-Zhu

Haley-Zhu commented on Dec 18, 2020

@Haley-Zhu

4.2.0版本,也是遇到了这个问题,Form上加name也出现问题
image

You need to make sure each form have unique name.
Like '<Form name='msgForm1 />', '<Form name='msgForm2 />'

YazRae

YazRae commented on Apr 29, 2023

@YazRae

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> </> ); }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @afc163@zombieJ@paranoidjk@crazyair@vylan

        Issue actions

          form demo element id not unique · Issue #10218 · ant-design/ant-design