Populate formControlName checkbox from pre-defined data in Angular 2+

Question

I have a dynamically created checkbox list and I'm having trouble to check the some trues according to a pre-defined list.

HTML:

   <div class="row">
            <div class="example-container col-md-6">
              <div *ngFor="let atribuicao of atribuicoesOcorrencia" formArraylName="inputAtribuicaoOcorrencia">
                <mat-checkbox [value]="atribuicao.id" (change)="onChange(atribuicao, $event)">
                  <div style="white-space: pre-wrap;">
                    {{ atribuicao.descricao }}
                  </div>
                </mat-checkbox>
              </div>
            </div>            
          </div>

CLASS TS: I try populate formControl name inputAtribuicaoOcorrencia in a list, in this case the only one checekd was id 3, but nothing happens

this.atribuicoesOcorrencia.forEach(listAtibuicoes=> {
  ocorrencia.atribuicoesDTO.forEach(x => {
    if(listAtibuicoes.id == x.id){  
      
      this.formCadastro.get('inputAtribuicaoOcorrencia').setValue('checked');
   
   
    }
  });
});

CLASS TS2: Or the code bellow for one ID checked only

  this.formCadastro.patchValue({

 inputAtribuicaoOcorrencia: 'checked',     


});

Answer 1

You need to use the [checked] attribute for the mat-checkbox

// example
<mat-checkbox 
    [value]="atribuicao.id" 
    [checked]="atribuicao.id" // This is what you need to add. If id is there, it will get checked
    (change)="onChange(atribuicao, $event)"
>
    <div style="white-space: pre-wrap;">
        {{ atribuicao.descricao }}
    </div>
</mat-checkbox>