javascript - How to pass the checked and unchecked value of checkboxes in component.ts file in angular? - Stack Overflow

admin管理员组

文章数量:1415645

I have a checkbox which looks like this:

It is iterating through json data as :

The code looks like :

<div class="card-body">
   <h5>Document List</h5>
   <div class="form-check" *ngFor="let document of documents">
      <label class="form-check-label" for="check1">
      <input type="checkbox" class="form-check-input" id="check1"  [value]= "document.docId"
      name="document.docName" (click)="callMe(document.docId)" >{{document.docName}}
      </label>
   </div>
</div>

And i want operation like when the user selects the checkboxes then I tried to pass the id to the ponent.ts file.In this method (click)="callMe(document.docId)" if the boxes is checked then id is ing as in ponent.ts file is

callMe(id:any){
  console.log(id);
}

But when i uncheck one of the checkbox the problem occuring is

Fig 2.

document.ts file is:

export class Document {

    docId:number;
    docName:number;

}

I have a checkbox which looks like this:

It is iterating through json data as :

The code looks like :

<div class="card-body">
   <h5>Document List</h5>
   <div class="form-check" *ngFor="let document of documents">
      <label class="form-check-label" for="check1">
      <input type="checkbox" class="form-check-input" id="check1"  [value]= "document.docId"
      name="document.docName" (click)="callMe(document.docId)" >{{document.docName}}
      </label>
   </div>
</div>

And i want operation like when the user selects the checkboxes then I tried to pass the id to the ponent.ts file.In this method (click)="callMe(document.docId)" if the boxes is checked then id is ing as in ponent.ts file is

callMe(id:any){
  console.log(id);
}

But when i uncheck one of the checkbox the problem occuring is

Fig 2.

document.ts file is:

export class Document {

    docId:number;
    docName:number;

}

• javascript
• angular
• typescript
• angular6

Share Improve this question Follow asked Nov 15, 2018 at 5:00 ashwin karkiashwin karki 67355 gold badges2121 silver badges3939 bronze badges 3

• Provide your full code to understand whats going wrong – Just code Commented Nov 15, 2018 at 5:02
• Can't you use template driven forms? – MonkeyScript Commented Nov 15, 2018 at 5:11
• Check this question - this might help you with your requirement stackoverflow./questions/47068222/… – ph1409 Commented Nov 15, 2018 at 5:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

app.ponent.ts

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.ponent.html'
})
export class AppComponent {
  documents = [
    {
      docId:1,
      docName:'Proforma Invoice',
      checked: true
    },
    {
      docId:2,
      docName:'Packing List',
      checked: false
    }
  ];

  checkboxClicked() {
    this.documents.filter(x => x.checked).map(x => {
      console.log(x.docId);
    })
  }

}

Note: You should not pass id as checkbox value. Create some boolean property with the object.

app.ponent.html

<ng-container *ngFor="let document of documents">
  <input type="checkbox" name="checkbox{{document.docId}}" [(ngModel)]="document.checked" (change)="checkboxClicked()" />
</ng-container>

    callMe(id:any,event){
      if(event.target.checked)
       {  
        console.log(id);
       }
    }

<div class="card-body">
   <h5>Document List</h5>
   <div class="form-check" *ngFor="let document of documents">
      <label class="form-check-label" for="check1">
      <input type="checkbox" class="form-check-input" id="check1"  [value]= "document.docId"
      name="document.docName" (click)="callMe(document.docId,$event)" >{{document.docName}}
      </label>
   </div>
</div>

You have to use bination of $event and id

callMe(event, id) {
  if (event.target.checked) {
    console.log(id);
  }
}

And in the template file like below

<input type="checkbox" class="form-check-input" id="check1" [value]="document.docId" name="document.docName" (change)="callMe($event, document.docId)">{{document.docName}}

Working stackblitz is here

本文标签：