时间戳

首页 > 解决方案 > 从 Angular 2+ 中的预定义数据填充 formControlName 复选框

angular-reactive-forms - 从 Angular 2+ 中的预定义数据填充 formControlName 复选框

问题描述

我有一个动态创建的复选框列表，我无法根据预定义的列表检查某些正确性。

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：我尝试在列表中填充 formControl 名称 inputAtribuicaoOcorrencia，在这种情况下，唯一的一个 checekd 是 id 3，但没有任何反应

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

CLASS TS2：或者下面的代码只检查一个 ID

  this.formCadastro.patchValue({

 inputAtribuicaoOcorrencia: 'checked',     


});

标签： angular-reactive-formsangular2-forms

解决方案

您需要使用[checked]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>

推荐阅读