Update multiple checkbox of multiple results - Angular Firebase forms

this is burning my head ... Each document has several checkboxes that should be able to be updated; the problems are various.

why it does not show the value "true" or "false" in the checkbox? img1 without formcontrolname it displays correctly img3

How do I declare the checkboxes in the constructor since when several forms are generated it gives an error because it cannot find the name? (if I discriminate 'formControlName=""' them as after the first iteration it stops and throws an error) img2

Thank you very much for the time!

1

2

3

<div class="col-lg-8 offset-lg-2">
      <div class="card mt-3" *ngFor="let validar of listarvalidar">
        <form [formGroup]="formvaliduser" (ngSubmit)="validUser()">
 
          <div class="card-text">
            <div
              class="form-check form-check-inline"
              *ngFor="let vali of validar.role | keyvalue; let i = index">
              <input
                class="form-check-input ms-1"
                formControlName=""
                type="checkbox"
                id="inlineCheckbox"
                [checked]="vali.value"/>
              <label class="form-check-label" for="inlineCheckbox">
                &nbsp; - 
              </label>
            </div>
            <p></p>
            <button
              type="submit"
              [disabled]="formvaliduser.invalid"
              class="btn btn-primary btn-block m-1">
              Agregar
            </button>
          </div>
        </form>
      </div> 

export class ValidaruserComponent implements OnInit {
  subscription!: Subscription;
  listarvalidar: Validados[] = [];
  formvaliduser: FormGroup;

  constructor(
    private validarSvc: ValidarService,
    private fb: FormBuilder,
    private router: Router,
    private toastr: ToastrService
  ) {
    this.formvaliduser = this.fb.group({
      admin: [], //???????????
      validado: [], //???????????
      primaria: [], //???????????
    });
  }

  ngOnInit(): void {
    this.listarValidado();
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe;
  }

  async listarValidado() {
    this.subscription = this.validarSvc.listarValidarSrv().subscribe((doc) => {
      console.log('docs', doc);
      this.listarvalidar = [];
      doc.forEach((element: any) => {
        this.listarvalidar.push({
          id: element.payload.doc.id,
          ...element.payload.doc.data(),
        });
      });
    });
  }