web-dev-qa-db-fra.com

Comment passer toutes les valeurs des cases à cocher cochées sur le formulaire Envoyer dans angular 4/6/7

Je veux récupérer tous les éléments cochés d'une fiche dans un composant sans utiliser la fonction change() ou click() car elle ne peut pas récupérer les éléments déjà cochés.

Voici mon tableau en 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
  }
angulartypescriptangular2-formsangular4-forms
7
Adrita Sharma

Vous pouvez utiliser Form 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>

la fonction peut être

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

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>
2
Aman Jain

Changez votre HTML en suivant:

<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 des 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 n'avez pas besoin d'utiliser le mot clé function avec votre méthode. Voici un lien vers démonstration de travail .

1
Faisal