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

Question

当我向表单添加 1-n 动态联系人时，DOM 提示(非致命)重复 ID 时遇到问题。如有任何建议，我们将不胜感激。

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

HTML:

<div id="contactsSection">
 <div formArrayName="contacts">
   <div class="form-group" *ngFor="let contact of 
       this.editForm.controls.contacts.controls; let i = index" 
         [formGroupName]="i">
       <div>
         <div class="row">
           <div class="form-group col-lg-4 col-md-4 col-sm-4 col-xs-4">
             <label for="contactFirstName">First Name:<sup>*</sup></label>
               <input type="text" class="form-control" 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, Validators.required ],
          contactEmail: [email, CustomValidators.email ],
          contactAgentLicenseExpirationDate: licenseExpirationDate,
          contactTitle: [titleUid, Validators.required ],
          ssn: ss
        });
        ctc.markAsUntouched();
        return ctc;
      }

编辑:我尝试了将索引添加到每个控件 ID 的解决方案。我不认为这是一个可行的解决方案，因为我必须协调代码以访问每个控件，主要是因为如果破坏用于动态添加每组控件的 formbuilder 代码: 让 ctc = this.fb.group({ 联系方式:id, contactFirstName: [firstName, Validators.required ], contactMobilePhone: [mobilePhone, CustomValidators.pattern ], contactAgentLicense:代理许可证， contactLastName: [lastName, Validators.required ],...

有趣的是，当我通过一个事件(按钮按下)运行这段代码时，DOM 没有报错。当我运行相同的代码作为初始化的一部分时，它确实会提示。

由于每个 FormGroup 都有一个唯一的名称，DOM 是否不够智能，无法实现唯一的 FormGroup/Control Id 是唯一的，而不是独立于 FormGroup 名称查看每个 Control Id？

Answer 1

您可以使用 index 生成唯一的 id:

<label [for]="'contactFirstName' + i">First Name:<sup>*</sup></label>
<input type="text" class="form-control" [id]="'contactFirstName' + i"  ...