Angular2 - データの配列を持つ反応形式

Question

私は、ユーザーが開始時間、終了時間、および曜日を含む最大3つのシフトコンテナを変更できるフォーム構成を自分のコンポーネントに持っています。

コードを3回複製することなく、私はこれに最も動的にアプローチする方法を見つけようとしています。ここ

は、単一のシフトのために私の現在のHTMLである：ここ

<span formGroupName="slice" *ngFor="let slice of [1,2,3]"> 
    <table class="table table-condensed"> 
     <thead> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th style="text-align:center;">Enable</th> 
     </thead> 
     <tbody> 
     <tr> 
      <td class="col-md-2" style="text-align:center; vertical-align:middle"> 
       Time Slice {{ slice }} 
      </td> 
      <td> 
       <select name="hour_start" class="form-control input-sm" formControlName="hour_start"> 
        <option value="{{ h }}" *ngFor="let h of hours">{{ h }}</option> 
       </select> 
      </td> 
      <td> 
       <select name="minute_start" class="form-control input-sm" formControlName="minute_start"> 
        <option value="{{ m }}" *ngFor="let m of minutes">{{ m }}</option> 
       </select> 
      </td> 
      <td> 
       <select name="period_start" class="form-control input-sm" formControlName="period_start"> 
        <option value="{{ p }}" *ngFor="let p of period">{{ p }}</option> 
       </select> 
      </td> 
      <td style="text-align:center; vertical-align:middle;">-</td> 
      <td> 
       <select name="hour_end" class="form-control input-sm" formControlName="hour_end"> 
        <option value="{{ h }}" *ngFor="let h of hours">{{ h }}</option> 
       </select> 
      </td> 
      <td> 
       <select name="minute_end" class="form-control input-sm" formControlName="minute_end"> 
        <option value="{{ m }}" *ngFor="let m of minutes">{{ m }}</option> 
       </select> 
      </td> 
      <td> 
       <select name="period_end" class="form-control input-sm" formControlName="period_end"> 
        <option value="{{ p }}" *ngFor="let p of period">{{ p }}</option> 
       </select> 
      </td> 
      <td style="vertical-align:middle; text-align:center;"><input type="checkbox" (change)="toggleSlice(slice, true)"></td> 
     </tr> 
     <tr> 
      <td class="col-md-2"></td> 
      <td colspan="7"> 
       <table class="table table-condensed" formGroupName="days"> 
        <tbody> 
        <tr> 
         <td *ngFor="let d of days"> 
          <div class="checkbox"> 
           <label> 
           <input type="checkbox" formControlName="day_{{ d }}"> {{ d }} 
           </label> 
          </div> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</span> 
<!-- Time Slice --> 
</span> 

は私の構成要素であるその他の細部について

this.transitionForm = this.fb.group({ 
      shift: this.fb.group({ 
       slice: this.fb.group({ 
        hour_start: { value: '1', disabled: true }, 
        minute_start: { value: '00', disabled: true }, 
        period_start: { value: 'AM', disabled: true }, 
        hour_end: { value: '1', disabled: true }, 
        minute_end: { value: '00', disabled: true }, 
        period_end: { value: 'AM', disabled: true }, 
        days: this.fb.group({ 
         day_Su: { value: '', disabled: true }, 
         day_M: { value: '', disabled: true }, 
         day_Tu: { value: '', disabled: true }, 
         day_W: { value: '', disabled: true }, 
         day_Th: { value: '', disabled: true }, 
         day_F: { value: '', disabled: true }, 
         day_Sa: { value: '', disabled: true } 
        }) 
       }) 
      }) 
     }); 

は、各シフトの行は私は有効/無効のチェックボックスが含まれていることです必要であれば他の2つのシフトコンテナを利用することを選択することができ、そうでない場合は無効になります。

jQueryのようなものを使用して、このチェックボックスの親要素を取得し、そのようにデータの各セット（シフト）を処理することでこれを実行できました。しかし、ここでの私の目標は、jQueryを使用する必要がなく、どのような反応形式がその状況に対して提供できるのかを理解することです。

質問：

どのようにして、それぞれにスライスをコーディング反応性のフォームではなく、ハードを使用して、よりダイナミックなセットアップにこれらの3つのタイムスライス（シフト）を形成して行くことができます。反応的なフォームでこれを処理できますか？

Answer 1

はい、Form Arraysを使用すると、反応するフォームのセクションを動的に追加および削除できます。

このhereをカバーする優れたブログ記事がありますが、私は

コンポーネント

ngOnInit() { 
    // we will initialize our form here 
    this.myForm = this._fb.group({ 
     name: ['', [Validators.required, Validators.minLength(5)]], 
     addresses: this._fb.array([ 
     this.initAddress(), 
     ]) 
    }); 
    } 

initAddress() { 
    // initialize our address 
    return this._fb.group({ 
     street: ['', Validators.required], 
     postcode: [''] 
    }); 
    } 

addAddress() { 
    // add address to the list 
    const control = <FormArray>this.myForm.controls['addresses']; 
    control.push(this.initAddress()); 
} 

removeAddress(i: number) { 
    // remove address from the list 
    const control = <FormArray>this.myForm.controls['addresses']; 
    control.removeAt(i); 
} 

HTML

<!-- list of addresses --> 
<div formArrayName="addresses"> 
    <div *ngFor="let address of myForm.controls.addresses.controls; let i=index"> 
    <!-- address header, show remove button when more than one address available --> 
    <div> 
     <span>Address {{i + 1}}</span> 
     <span *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"> 
     </span> 
    </div> 

    <!-- Angular assigns array index as group name by default 0, 1, 2, ... --> 
    <div [formGroupName]="i"> 
     <!--street--> 
     <div> 
     <label>street</label> 
     <input type="text" formControlName="street"> 
     <!--display error message if street is not valid--> 
     <small [hidden]="myForm.controls.addresses.controls[i].controls.street.valid"> 
      Street is required 
     </small> 
     </div> 
     <!--postcode--> 
     <div> 
     <label>postcode</label> 
     <input type="text" formControlName="postcode"> 
     </div> 
    <div> 
    </div> 
</div> 

下記の関連部分のことを書いてみました