Angular2動的に重複する入力フィールド

Question

このチュートリアルの「動的に重複する入力要素」モジュールのビデオ＃3にあります。彼女はチェックボックスでコントロールを隠す方法を示します。彼女が「カタログを送る」をクリックすると、アドレスが表示されます。それは彼女がアドレスブロックを隠して表示する方法です。彼女はFormarrayの外に[（ngModel）]を持っているので、hideとshow toggleを正しく行っている。私が持っている問題は、アドレスブロック内でトグルの影響をしなければならないということです。私は "仕事"ラジオボタンをチェックすると、都市と州だけを表示する必要があると言いますが、私がホームをクリックすると、私に完全なアドレスを与えるべきです。私は上記の例と同様の効果を達成しようとしています。

私が問題になるのは、[（ngModel）]と* ngifを使用してFormArray内で非表示/表示の影響を受けるときです。 DDLでオプションを選択すると、フォームグループの次のすべてのブロックで全く同じことが複製されます。私はこれを解決する方法がわかりません。あなたの誰もが似たような問題を抱えていて、修正できましたか？どのように（[ngModel]）を使わずにHide/Showトグルエフェクトを行うことができるか知っていますか？私が話していることを見たいと思えば、私はイメージを付けました。前もって感謝します！！

component.html

<div formArrayName="Disciplines" *ngFor="let discipline of Disciplines.controls; let i=index"> 
       <div [formGroupName]="i"> 
        <div class="form-group"> 
         <label class="col-md-2 control-label">Discipline</label> 
         <div class="col-md-3"> 
          <label class="control-label" id="fireId" name="agencyProfile-label-fireId" attr.for="{{fireId + i}}"> 
           <input id="{{fireId + i}}" name="Fire" 
             type="checkbox" formControlName="Fire"> 
           Fire 
          </label> 
         </div> 
         <div class="col-md-3"> 
          <label class="control-label" id="medicalId" name="agencyProfile-label-medicalId" attr.for="{{medicalId + i}}"> 
           <input id="{{medicalId + i}}" name="Medical" 
             type="checkbox" formControlName="Medical"> 
           Medical 
          </label> 
         </div> 
         <div class="col-md-3"> 
          <label class="control-label" id="policeId" name="agencyProfile-label-policeId" attr.for="{{policeId + i}}"> 
           <input id="{{policeId + i}}" name="Police" 
             type="checkbox" formControlName="Police"> 
           Police 
          </label> 
         </div> 
        </div> 

        <!--<div *ngIf="agency.Fire || agency.Medical || agency.Police">--> 
         <div class="form-group"> 
          <div class="col-md-12"> 
           <label class="col-md-2 control-label" id="contractTermsId" name="agencyProfile-label-contractTermsId" attr.for="{{contractTermsId + i}}">Contract Terms</label> 
           <div class="col-md-6"> 
            <select class="form-control" id="{{contractTermsId + i}}" name="agencyProfile-drodown-contractTermsId" formControlName="ContractTermId" [(ngModel)]="agency.ContractTerms"> 
             <option *ngFor="let d of contract" [value]="d.ContractTermId">{{d.ContractTerms}}</option> 
            </select> 
           </div> 
          </div> 
         </div> 
         <div *ngIf="agency.ContractTerms == 1"> 
          <div class="form-group"> 
           <div class="col-md-12"> 
            <label class="col-md-2 control-label" attr.for="{{FirstEndDateId + i}}" id="FirstEndDateId" name="agencyProfile-label-FirstEndDate">First EndDate<span class="compulsary">*</span></label><br> 
            <div class="col-md-4"> 
             <input type="date" id="{{FirstEndDateId + i}}" formControlName="FirstEndDate" /> 
             <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions" 
          formControlName="RenewalDate"></my-date-picker>--> 
            </div> 
            <label class="col-md-1 control-label" attr.for="{{secondEndDateId + i}}" id="secondEndDateId" name="agencyProfile-label-secondEndDateId">Second EndDate<span class="compulsary">*</span></label><br> 
            <div class="col-md-4"> 
             <input type="date" id="{{secondEndDateId + i}}" formControlName="SecondEndDate" /> 
             <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions" 
          formControlName="RenewalDate"></my-date-picker>--> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div *ngIf="agency.ContractTerms == 2"> 
          <div class="form-group"> 
           <div class="col-md-12"> 
            <label class="col-md-2 control-label" attr.for="{{startDateId + i}}" id="startDateId" name="agencyProfile-label-startDateId">Start Date<span class="compulsary">*</span></label><br> 
            <div class="col-md-4"> 
             <input type="date" id="{{startDateId + i}}" formControlName="StartDate" /> 
             <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions" 
          formControlName="RenewalDate"></my-date-picker>--> 
            </div> 
            <label class="col-md-1 control-label" attr.for="{{endDateId + i}}" id="endDateId" name="agencyProfile-label-endDateId">End Date<span class="compulsary">*</span></label><br> 
            <div class="col-md-4"> 
             <input type="date" id="{{endDateId + i}}" formControlName="EndDate" /> 
             <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions" 
          formControlName="RenewalDate"></my-date-picker>--> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-md-12"> 
           <label class="col-md-2 control-label" attr.for="{{renewalDateId + i}}" id="renewalDateId" name="agencyProfile-label-renewalDateId">Renewal Date<span class="compulsary">*</span></label><br> 
           <div class="col-md-2"> 
            <input type="date" id="{{renewalDateId + i}}" formControlName="RenewalDate" /> 
            <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions" 
         formControlName="RenewalDate"></my-date-picker>--> 
           </div> 
           <label class="col-md-1 control-label" attr.for="{{followupDateId + i}}">FollowUp Date<span class="compulsary">*</span></label><br> 
           <div class="col-md-2 "> 
            <input type="date" id="{{followupDateId + i}}" formControlName="FollowupDate" /> 
            <!--<my-date-picker name="followupDate" [options]="myDatePickerOptions" 
         formControlName="FollowupDate"></my-date-picker>--> 
           </div> 
           <label class="col-md-1 control-label" attr.for="{{checklistDateSentId + i}}">CheckList Date Sent</label><br> 
           <div class="col-md-2"> 
            <input type="date" id="{{checklistDateSentId + i}}" formControlName="CheckListDateSent" /> 
            <!--<my-date-picker name="primerDate" [options]="myDatePickerOptions" 
         formControlName="PrimerDate"></my-date-picker>--> 
           </div> 
          </div> 
         </div> 
        <!--</div>--> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-md-2"> 
        <button class="col-md-12 btn btn-primary" 
          name="agencyProfileTab-button-searchUserProfileId" 
          (click)="addDisciplines()" 
          type="button"> 
         Add Discipline 
        </button> 
       </div> 
      </div> 

component.ts上の画像で

import { Component, OnInit, AfterViewInit, OnDestroy, ViewChildren, ElementRef} from '@angular/core'; 
import { FormBuilder, FormGroup, FormControl, FormArray, Validators, FormControlName } from '@angular/forms'; 
import { ActivatedRoute, Router } from '@angular/router'; 

import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/observable/fromEvent'; 
import 'rxjs/add/observable/merge'; 
import { Observable } from 'rxjs/Observable'; 
import { Subscription } from 'rxjs/Subscription'; 
import { IAgencyStatus } from './iagencystatus'; 
@Component({ 
    moduleId: module.id, 
    templateUrl: 'agencyprofile.component.html' 
}) 

export class AgencyProfileComponent implements OnInit, AfterViewInit, OnDestroy { 
    @ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[]; 

     agency: IAgencyProfile; 

    get Disciplines(): FormArray { 
      return <FormArray>this.agencyForm.get('Disciplines'); 
     } 
    ngOnInit(): void { 
      this.Form = this.fb.group({ 
       Disciplines: this.fb.array([this.buildDisciplines()]), 
    } 

    addDisciplines(): void { 
      this.Disciplines.push(this.buildDisciplines()); 
     } 
    buildDisciplines(): FormGroup { 
      return this.fb.group({ 
       ContractTerms: '', 
       ContractTermId: 0, 
       StartDate: null, 
       EndDate: null, 
       FirstEndDate: null, 
       SecondEndDate: null, 
       Fire: false, 
       Medical: false, 
       Police: false, 
       FollowupDate: null, 
       RenewalDate: null, 
       CheckListDateSent: null 
      }); 
     } 

Picture for the above html form 私は第一ブロックの選択火を持っていると "規律追加" をクリック。同じ選択が次のブロックに自動的に行われました！あなたが任意のより多くの質問がある場合は、この行を無効のフォームを使用している場合、私は

Answer 1

を知ってみましょう：

formControlName="Medical" 

は、フォームモデルの制御に、この入力要素を結合されます。この入力要素のコピーはすべてと同じであるため、formControlNameを更新すると、すべて更新されます。だから彼らそれぞれが固有の名前を持っている

formControlName={{Medical+ i}} 

：

はあなたのidプロパティに使用するのと同じ技術を使用してformControlNameを変更してみてください。

それがあなたに役立つかどうか教えてください。