Comment passer toutes les valeurs de case à cocher cochées sur le formulaire Soumettre en oblique 2/4

Question

Je souhaite récupérer tous les éléments cochés d'un formulaire dans le composant sans utiliser la fonction change() ou click() car il ne peut pas récupérer les éléments déjà sélectionnés.

Voici mon Array TS:

PartyRoles = [ 
    { 
    Id: 1, 
    Name: "Vendor", 
    Checked: true 
    }, 
    { 
     Id: 2, 
     Name: "Client", 
     Checked: true 
    }, 
    { 
     Id: 3, 
     Name: "Consigner", 
     Checked: false 
    }  
    ] 

Mon formulaire HTML:

<form (ngSubmit)="editPartyRolesSubmit()"> 
    <div *ngFor="let item of PartyRoles"> 
     <label> 
     <input type="checkbox" value="{{item.Id}}" [attr.checked]="item.Checked==true ? true : null" [attr.disabled]="item.Id==1 ? true : null" /> 
     <span innerHTML="{{item.Name}}"></span> 
     </label> 
    </div> 
</form> 

Ma fonction onSubmit dans laquelle je veux obtenir toutes les valeurs vérifiées:

editPartyRolesSubmit= function() { 
    // Please suggest how to fetch checked items 
    } 

Answer 1

Vous pouvez utiliser le formulaire et NgModel

<form #checkboxForm="ngForm" (submit)="editPartyRolesSubmit()"> 
    <div *ngFor="let item of PartyRoles"> 
     <label> 
     <input type="checkbox" value="{{item.Id}}" [(ngModel)]="item.Checked" [name]="item.Name" [attr.disabled]="item.Id==1 ? true : null" /> 
     <span innerHTML="{{item.Name}}"></span> 
    </label> 
    </div> 
    <input type="submit" value="Submit"> 
</form> 

fonction peut être

editPartyRolesSubmit() { 
    console.log(this.PartyRoles); 
} 

Answer 2

Vous pouvez créer un tableau séparé pour les éléments sélectionnés

SelectedList=[] 
for(let i=0;i<PartyRoles.length;i++){ 
if(PartyRoles[i].checked){ 
    SelectedList.push(PartyRoles[i]); 
} 
} 

Answer 3

Changer votre Html à suivre:

<form (ngSubmit)="editPartyRolesSubmit()"> 
    <div *ngFor="let item of PartyRoles"> 
     <label> 
     <input type="checkbox" value="{{item.Id}}" 
       [checked]="item.Checked" 
       (change)="item.Checked = !item.Checked" 
       [attr.disabled]="item.Id==1 ? true : null" /> 
     <span innerHTML="{{item.Name}}"></span> 
     </label> 
    </div> 
</form> 

Votre PartyRoles restera mis à jour avec les dernières valeurs de cases à cocher. Vous pouvez y accéder comme ceci à titre d'exemple:

editPartyRolesSubmit(){ 

    // Access each item like this in PartyRoles 
    this.PartyRoles.forEach(role=>{ 
     console.log('Id: ' + role.Id + ', Name: ' + role.Name + ', Checked: ' + role.Checked); 
    }); 

    // Or like this 
    let role = this.PartyRoles.find(x=>x.Id === 1); 
    if(role !== undefined){ 
     console.log(role); 
    } 

    // Or a filetered list 
    let checkedRoles = this.PartyRoles.filter(x=>x.Checked === true); 
    console.log(checkedRoles); 

    // Or by array index 
    let roleTwo = this.PartyRoles[2]; 
    console.log(roleTwo); 

    } 

Vous ne devez pas utiliser le mot-clé function avec vous méthode. Voici un lien vers working demo.

Answer 4

Vous pouvez utiliser ceci:

<form (ngSubmit)="editPartyRolesSubmit()"> 
<div *ngFor="let item of PartyRoles; let i = index"> 
    <label> 
    <input type="checkbox" 
      [attr.checked]="item.Checked == true ? true : null" 
      (change)="item.Checked = !item.Checked" 
      [attr.disabled]="item.Id==1 ? true : null" /> 
    <span innerHTML="{{item.Name}}"></span> 
    </label> 
</div> 
<button type="submit">Click</button> 
</form> 

Ou:

<form (submit)="editPartyRolesSubmit()"> 
<div *ngFor="let item of PartyRoles"> 
    <label> 
    <input type="checkbox" value="{{item.Id}}" [(ngModel)]="item.Checked" [name]="item.Name" [attr.disabled]="item.Id==1 ? true : null" /> 
    <span innerHTML="{{item.Name}}"></span> 
</label> 
</div> 
<button type="submit">Click</button> 
</form>