Dynamic checkbox load does not work

I’m creating a checkbox list, which has to have a minimum value marked as it is mandatory, what happens is that I’m getting the values ​​right but at the time of creating the list only the first value comes out checked, which is incorrect since in the arrangement that I get 4 are marked as checked.

Values ​​that my arrangement brings

(5) [{…}, {…}, {…}, {…}, {…}]
0
:
{isChecked: true, Tipo: "Moto"}
1
:
{isChecked: true, Tipo: "liviano"}
2
:
{isChecked: true, Tipo: "Suburban"}
3
:
{isChecked: true, Tipo: "Mini Ban"}
4
:
{isChecked: false, Tipo: "PruebaDePost"}
length
:
5
__proto__
:
Array(0)

how I draw it


                    <ion-list class="sinbo" *ngFor="let tipo of usersProv.tipoVehiculos; let i=index">   
                        <ion-item>
                        <ion-label>{{ tipo.Tipo }}</ion-label>
                        <ion-checkbox color="dark" formControlName="tipoVehiculo" (ngModelChange)="tipoVehiculo = $event" [(ngModel)]='tipo.isChecked[i]' ></ion-checkbox>
                        </ion-item>
                    </ion-list>

What could I be doing wrong?

For one thing, you’re mashing up a bunch of bindings that are probably fighting. If you want to use FormControls, lose the ngModel binding. Otherwise, get rid of formControlName and make the ngModel binding one-way in if you want to keep (ngModelChange) separate.

ok rapropos.
then as I would do to pass the reference without the ngModel and continue using FormControls is that it is the first time working with dynamic checkboxes and according to what I have researched so it should serve but obviously it does not work …

Some good Samaritan to guide me

I had not included the whole rapropos form, that’s why I use the formControlName because if I do not it falls …

<form [formGroup]="EditarDatosGruaForm" novalidate>
                    <ion-list *ngFor="let dato of usersProv.datosGrua"> 
                        <ion-input-mask class="inabilidato" label="Placa" placeholder="ABC-123 Ó 123-456" typeInput="text" typeLabel="fixed" icon="subway" (ngModelChange)="placa = $event" [(ngModel)] = "dato.registrationNumberCrane" formControlName="placa" mask="AAA-AAA" [disabled]="true"></ion-input-mask>
                        <ion-item class="alert" *ngIf="EditarDatosGruaForm.get('placa').errors && EditarDatosGruaForm.get('placa').dirty">
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('placa').hasError('required')">*** Campo requerido ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('placa').hasError('minlength')">*** Número de placa demasiado corto ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('placa').hasError('maxlength')">*** Número de placa Nombre demasiado largo ***</p>
                        </ion-item>
            
                        <ion-input-mask label="Cilindraje" placeholder="12000 C.C" typeInput="tel" typeLabel="fixed" (ngModelChange)="cilindraje = $event" [(ngModel)] = "dato.displacementCrane" formControlName="cilindraje" mask="99999 C.C."> </ion-input-mask>
                        <ion-item class="alert" *ngIf="EditarDatosGruaForm.get('cilindraje').errors && EditarDatosGruaForm.get('cilindraje').dirty">
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('cilindraje').hasError('required')">*** Campo requerido ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('cilindraje').hasError('minlength')">*** Cilindraje demasiado bajo ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('cilindraje').hasError('maxlength')">*** Cilindraje demasiado alto ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('cilindraje').hasError('pattern')">*** Debe ingresar solo números ***</p>
                        </ion-item>

                        <ion-input-mask label="Carga Util" placeholder="3000 A.P" typeInput="tel" typeLabel="fixed" (ngModelChange)="carga = $event" [(ngModel)] = "dato.usefulLoadCrane" formControlName="carga" mask="9999 A.P."></ion-input-mask>
                        <ion-item class="alert" *ngIf="EditarDatosGruaForm.get('carga').errors && EditarDatosGruaForm.get('carga').dirty">
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('carga').hasError('required')">*** Campo requerido ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('carga').hasError('minlength')">*** Carga demasiado baja ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('carga').hasError('maxlength')">*** Carga demasiado alta ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('carga').hasError('pattern')">*** Debe ingresar solo números ***</p>
                        </ion-item>
            
                        <ion-item>
                            <ion-label>Modelo</ion-label>
                            <ion-input type="text" placeholder="Montero 4590" (ngModelChange)="modelo = $event" [(ngModel)] = "dato.modelCrane" formControlName="modelo"></ion-input>
                        </ion-item>
                        <ion-item class="alert" *ngIf="EditarDatosGruaForm.get('modelo').errors && EditarDatosGruaForm.get('modelo').dirty">
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('modelo').hasError('required')">*** Campo requerido ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('modelo').hasError('minlength')">*** Modelo desconocido ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('modelo').hasError('maxlength')">*** Seguro de su modelo ***</p>
                            <p color="danger" ion-text *ngIf="EditarDatosGruaForm.get('modelo').hasError('pattern')">*** Debe ingresar solo letras ó números ***</p>
                        </ion-item>
            
                        <ion-item>
                            <ion-label>Año</ion-label>
                            <ion-select formControlName="anio" (ngModelChange)="anio = $event" [(ngModel)] = "dato.yearCrane">
                            <ion-option value="1980" ng-selected="1980">1980</ion-option>
                            <ion-option value="1981">1981</ion-option>
                            <ion-option value="1982">1982</ion-option>
                            <ion-option value="1983">1983</ion-option>
                            <ion-option value="1984">1984</ion-option>
                            <ion-option value="1985">1985</ion-option>
                            <ion-option value="1986">1986</ion-option>
                            <ion-option value="1987">1987</ion-option>
                            <ion-option value="1988">1988</ion-option>
                            <ion-option value="1989">1989</ion-option>
                            <ion-option value="1990">1990</ion-option>
                            <ion-option value="1991">1991</ion-option>
                            <ion-option value="1992">1992</ion-option>
                            <ion-option value="1993">1993</ion-option>
                            <ion-option value="1994">1994</ion-option>
                            <ion-option value="1995">1995</ion-option>
                            <ion-option value="1996">1996</ion-option>
                            <ion-option value="1997">1997</ion-option>
                            <ion-option value="1998">1998</ion-option>
                            <ion-option value="1999">1999</ion-option>
                            <ion-option value="2000">2000</ion-option>
                            <ion-option value="2001">2001</ion-option>
                            <ion-option value="2002">2002</ion-option>
                            <ion-option value="2003">2003</ion-option>
                            <ion-option value="2004">2004</ion-option>
                            <ion-option value="2005">2005</ion-option>
                            <ion-option value="2006">2006</ion-option>
                            <ion-option value="2007">2007</ion-option>
                            <ion-option value="2008">2008</ion-option>
                            <ion-option value="2009">2009</ion-option>
                            <ion-option value="2010">2010</ion-option>
                            <ion-option value="2011">2011</ion-option>
                            <ion-option value="2012">2012</ion-option>
                            <ion-option value="2013">2013</ion-option>
                            <ion-option value="2014">2014</ion-option>
                            <ion-option value="2015">2015</ion-option>
                            <ion-option value="2016">2016</ion-option>
                            <ion-option value="2017">2017</ion-option>
                            <ion-option value="2018">2018</ion-option>
                            <ion-option value="2019">2019</ion-option>
                            </ion-select>
                        </ion-item>
                        <ion-list-header>
                            Vehículos a brindar servicio
                        </ion-list-header>
                    </ion-list>
                    <ion-list class="sinbo" *ngFor="let tipo of usersProv.tipoVehiculos; let i=index">   
                        <ion-item>
                        <ion-label>{{ tipo.Tipo }}</ion-label>
                        <ion-checkbox color="dark" formControlName="tipoVehiculo" (ngModelChange)="tipoVehiculo = $event" [(ngModel)]='tipo.isChecked[i]'></ion-checkbox>
                        </ion-item>
                    </ion-list>
                    <div class="btnActualizar">
                       <button ion-button block icon-left class="btns" type="submit" [disabled]="EditarDatosGruaForm.invalid" (click)="ActualizarDatosVehiculo()">
                            <i class="material-icons">directions_bus</i>
                            Actualizar datos del vehículo
                        </button>
                    </div>
                </form>

You didn’t listen to what I said earlier. I don’t want to see the letters ngModel in that order anywhere in your template.

Sorry I had not understood …
I already removed it and now it marks all of them and it should only mark me 4 out of 5.
I do not know where he is doing the magic to mark them …
apology is the first time I work with the checkboxes

my code is like this …


                    <ion-list class="sinbo" *ngFor="let tipo of usersProv.tipoVehiculos; let i=index">   
                        <ion-item>
                        <ion-label>{{ tipo.Tipo }}</ion-label>
                        <ion-checkbox color="dark" formControlName="tipoVehiculo" (ngModelChange)="tipoVehiculo = $event"></ion-checkbox>
                        </ion-item>
                    </ion-list>

That still contains “ngModel” in it. Make it go away.

Your larger problem is that you are assigning all entries in the loop to the same FormControl, so naturally they are all aliased. Look at how it should be done here.

rapropos and remove all the ngModel from my template html and in fact if I draw well the values ​​that come from BD but now I do not know how to access the new value that the user can enter since this is a screen of service update I read and followed to the detour what you recommended but the code does not run and bursts … I’m stuck

It would be in the value of the associated FormControl.

ok rapropos after so much looking and reading something I have advanced.
I already get the value of the new check but I do not get the value of those that are already checked I do not know how to do it because it just grabs the new chekeds and I take hold of the new ones and those I had already marked in the registry.
it is an update screen

Servsel(id:string, isChecked: boolean) {
  const ServiciosZonasFormArray = <FormArray>this.editarServiciosZonasForm.controls.tiposServicios;

  if(!isChecked) {
    let index = ServiciosZonasFormArray.controls.findIndex(x => x.value == id)
    ServiciosZonasFormArray.removeAt(index);
  } else {
    ServiciosZonasFormArray.push(new FormControl(id));
    this.tiposServicios = ServiciosZonasFormArray.value;
  }
  console.log(this.tiposServicios)
}

ProvSel(id:string, isChecked: boolean) {
  const provinciasFormArray = <FormArray>this.editarServiciosZonasForm.controls.provincias;
  if(!isChecked) {
    let index = provinciasFormArray.controls.findIndex(x => x.value == id)
    provinciasFormArray.removeAt(index);
  } else {
    provinciasFormArray.push(new FormControl(id));
    this.provincias = provinciasFormArray.value;
  }
  console.log(this.provincias)
}

so I get them


                        <ion-item *ngFor="let tipo of usersProv.tipoServicios; let i= index">
                            <ion-label>{{ tipo.Tipo }}</ion-label>
                            <ion-checkbox color="dark" [checked] = "tipo.isChecked" (ionChange)="Servsel(i, $event.checked)"></ion-checkbox>
                        </ion-item>

my HTML