角+材料 - 如何处理与表单组的多个复选框

Question

我有一个我从后端获得的兴趣列表。我希望用户能够选择他们想要的兴趣。我将只存储他们在数据库中检查的兴趣，并在他们加载页面时进行预填充。但首先，我需要获得用户选择的这些兴趣。

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); 
    } 

} 

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> 

在我关于改变事件的console.log它示出了没有被添加到利益阵列内的值的interestFormGroup。即使是复选框也会被检查。

Answer 1

您应该添加控件FormArray手动喜欢：

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值您想要的结果：

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