Angular2フォームビルダ、値の配列を格納する

Question

私はこのような角度2リアクティブフォームビルダを使用しています：

<div class="questionSection"> 
    <b class="questionTitle">Remove records that don't have:</b> 
    <div class="horizontalOptions"> 
     <label 
     class="horizontalOption" 
     *ngFor="let choice of excludeRecords" 
     > 
      <input type="checkbox" 
      [value]="choice.value" 
      formControlName="excludedRecords" 
      > 
      {{choice.label}} 
     </label> 
    </div> 
</div> 

私はexcludedRecords値は配列になりたい、これはHTMLを生成しています変数です：

excludeRecords = [ 
     {label: 'Full Mailing Address', value:'fullMailing', checked:false}, 
     {label: 'Full Office Address', value:'fullOffice', checked:false}, 
     {label: 'Email Address', value:'emailAddress', checked:false}, 
     {label: 'Phone #', value:'phoneNum', checked: false}, 
    ]; 

そして、これは私が最初のフォームの選択を生成しています方法です：

constructor(private formBuilder: FormBuilder) { 
    this.initialValues = { 
     mainChoice: 'entireUSA', 
     excludedRecords: [], 
     stateChoice: 'all', 
     includedStates: [], 
     specialtyChoice: 'all', 
     includedSpecialties: [] 
    } 
    this.form = formBuilder.group(this.initialValues); 
    this.formSelections = this.initialValues; 

    this.form.valueChanges.subscribe(
     data => { 
      console.log('form changed', data); 
      this.formSelections = data; 
     } 
    ); 
} 

右今度はtrueまたはfalseに値を切り替えるだけですが、各チェックボックスの入力に値の配列を出力したいのですが、これはAngular2 Form Builderで可能ですか？

Answer 1

解決策が見つかりました。私の場合は、複数のカテゴリがあります。カテゴリには、フォームのID、名前、および選択したプロパティがあります。

<label *ngFor="let category of categories"> 
    {{category.name}} 

    <input [checked]="book.category_ids.includes(category.id)" 
      type="checkbox" 
      id="{{category.id}}" 
      value="{{category.name}}" 
      formControlName="category_ids" 
      (change)="updateCheckedOptions(category.id, $event)"> 
    </label> 

チェックボックスをオンにするたびに、カテゴリを更新します。このとき、category_idsはtrueのtrueに設定されます。フォームを送信する前に、私は手動でcategory_idsフィールドを選択した値で更新します。