动态表单上DOM重复ID的Angular 4问题

概述当我向表单添加1-n动态联系人时,我对DOM抱怨(非致命)有关重复ID的问题.任何建议,将不胜感激. 错误：[DOM]找到2个具有非唯一ID的元素#contactFirstName： HTML： <div id="contactsSection"> <div formArrayName="contacts"> <div class="form-group" *ngFor="let cont @H_404_1@ 当我向表单添加1-n动态联系人时,我对DOM抱怨(非致命)有关重复ID的问题.任何建议,将不胜感激.

错误：[DOM]找到2个具有非唯一ID的元素#contactFirstname：

HTML：

<div ID="contactsSection"> <div formArrayname="contacts">   <div  *ngFor="let contact of        this.editForm.controls.contacts.controls; let i = index"          [formGroupname]="i">       <div>         <div >           <div >             <label for="contactFirstname">First name:<sup>*</sup></label>               <input type="text"  ID="contactFirstname"                     name="contactFirstname"                        formControlname="contactFirstname"                        required placeholder="First name">**Typescript Code:** To initialize the form:    this.editProducerForm = this.fb.group({      ...      contacts: this.fb.array([])    });To add a contact dynamically to the form I call:    let control = this.editProducerForm.get('contacts') as FormArray;    control.push(this.createContact(firstname,...));which uses this method:    createContact(firstname: string = '',...): FormGroup {        let ctc = this.fb.group({          contactID: ID,contactFirstname: [firstname,ValIDators.required ],contactMobilePhone: [mobilePhone,CustomValIDators.phone ],contactAgentlicense: agentlicense,contactLastname: [lastname,contactEmail: [email,CustomValIDators.email ],contactAgentlicenseExpirationDate: licenseExpirationDate,contactTitle: [TitleUID,ssn: ss        });        ctc.markAsUntouched();        return ctc;      }

编辑：
我尝试了为每个控件ID添加索引的解决方案.我不相信这是一个可行的解决方案,因为我必须协调代码来访问每个控件,主要是因为如果打破用于动态添加每组控件的formbuilder代码：
   let ctc = this.fb.group({
      contactID：ID,
      contactFirstname：[firstname,ValIDators.required],
      contactMobilePhone：[mobilePhone,CustomValIDators.pattern],
      contactAgentlicense：agentlicense,
      contactLastname：[lastname,…

有趣的是,当我通过事件(按钮推送)运行此代码时,DOM不会抱怨.当我作为初始化的一部分运行相同的代码时,它会抱怨.

由于每个FormGroup都有一个唯一的名称,DOM是不是足够智能,以实现一个独特的FormGroup / Control ID是唯一的,而不是查看FormGroup名称的每个Control ID独立？

解决方法 您可以使用index生成唯一ID：

<label [for]="'contactFirstname' + i">First name:<sup>*</sup></label><input type="text"  [ID]="'contactFirstname' + i"  ...

总结

以上是内存溢出为你收集整理的动态表单上DOM重复ID的Angular 4问题全部内容，希望文章能够帮你解决动态表单上DOM重复ID的Angular 4问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。