角度+マテリアル - フォームグループで複数のチェックボックスを処理する方法

Question

私はバックエンドから得ている興味のリストを持っています。私は、ユーザーが彼らが望む興味を選択できるようにしたい。チェックした利息のみをDBに保存し、ページを読み込むときにあらかじめ入力します。しかし、まず、ユーザーが選択したこれらの関心事を取得する必要があります。

interest.component.ts

export class InterestsComponent implements OnInit { 

    interestFormGroup : FormGroup 
    interests:any; 
    selected: any; 


    constructor(public interestService: InterestService, private formBuilder: FormBuilder, 
) { } 

    ngOnInit() { 

    this.interestFormGroup = this.formBuilder.group({ 
     interests: this.formBuilder.array([]) 
    }); 


    this.interestService.all().subscribe((res) => { 

     this.interests = res; 

    }); 

    } 

    change() { 
    console.log(this.interestFormGroup.value); 
    } 

} 

変更イベントで私はconsole.logでinterest.component.html

<div id="interest"> 

    <div class="interest-list"> 

     <form [formGroup]="interestFormGroup"> 
      <div *ngFor="let interest of interests" > 
       <mat-checkbox class="example-margin" formNameArray="interests" (change)="change()">{{interest}}</mat-checkbox> 
      </div> 
     </form> 

    </div> 

</div> 

それはそこに示しては、内の関心のアレイに追加されているいかなる値ではありませんinterestFormGroupチェックボックスもチェックされています。次のようにテンプレートを変更

this.interests = res; 
const formArray = this.interestFormGroup.get('interests') as FormArray; 
this.interests.forEach(x => formArray.push(new FormControl(false))); 

：

<form [formGroup]="interestFormGroup" (ngSubmit)="submit()"> 
    <ng-container formArrayName="interests"> 
     <div *ngFor="let interest of interests; let i = index" > 
     <mat-checkbox class="example-margin" [formControlName]="i"> 
      {{interest}} 
     </mat-checkbox> 
     </div> 
    </ng-container> 
    <button>Submit</button> 
</form> 

そして、あなたはあなたにFormArray値を変換する必要があるフォームを送信しますが

Answer 1

は、手動のようFormArrayにコントロールを追加する必要があります希望の結果：

submit() { 
    const result = Object.assign({}, 
    this.interestFormGroup.value, { 
     interests: this.interests 
     .filter((x, i) => !!this.interestFormGroup.value.interests[i])}); 

    console.log(result); 
} 

代替ソリューションは、changeイベントを聞いて、手動でFormArrayに値を追加および削除です：

<div *ngFor="let interest of interests; let i = index" > 
    <mat-checkbox class="example-margin" 
       (change)="onChange($event)" [value]="interest">{{interest}}</mat-checkbox> 
</div> 

onChange(event) { 
    const interests = <FormArray>this.interestFormGroup.get('interests') as FormArray; 

    if(event.checked) { 
    interests.push(new FormControl(event.source.value)) 
    } else { 
    const i = interests.controls.findIndex(x => x.value === event.source.value); 
    interests.removeAt(i); 
    } 
} 

Stackblitz example