動的フォームのDOM重複IDの角4の問題

Question

フォームに1-nの動的な連絡先を追加しているときに重複IDについて不平を言っているDOMに問題があります。任意の提案をいただければ幸いです。

エラー：[DOM非固有のID #contactFirstNameを発見2つの要素：

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 { contactId：ID、 contactFirstName：[FirstNameとValidators.required]、 contactMobilePhone：[mobilePhone、CustomValidators.pattern]、 contactAgentLicense：agentlicense、 contactLastName：[lastNameの、Validators.required]、...

興味深いことに、このコードをイベント（ボタンプッシュ）で実行すると、DOMは文句を言わない。初期化の一部として同じコードを実行すると、文句を言う。

FormGroupごとに一意の名前があるため、DOMは一意のFormGroup/Control IDを実現するほどスマートではありませんか？FormGroup名の各Control Idを見るのではなく、一意です。

Answer 1

あなたはユニークなIDを生成するindexを使用することができます。提案のための

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