I got undefined when I pass value from checkbox to modal

183 Views Asked by At

I would like to receive id value of users checked by check box than pass to modal. But I can't find a reason why it doesn't work. In modalMileage(), the checkedList[] has id values well, but when I send it to modal, I got an undefined value. Can anyone help me?

user-management.ts

  checkedList: User[] = [];


  onCheckboxChange(event){
    if(event.target.checked){
      console.log("dd " + event.target.value);
      this.checkedList.push(event.target.value);
      console.log(this.checkedList);
    }
  }

  modalMileage(){
    const modalOptions = {
      data: {
        checkedList: this.checkedList
      }
    };
    this.modalRef = this.modalService.show(ModalMileageComponent, modalOptions);
  }

user-management.html

<button type="button" mdbBtn color="white" outline="true" rounded="true" size="sm" class="px-2" mdbWavesEffect (click)="modalMileage()">
        <mdb-icon fas icon="star" class="mt-0"></mdb-icon>
</button>


<tr *ngFor="let user of users; let i = index">
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" >
              <input type="checkbox" [value]="user.id" (change)="onCheckboxChange($event)" />
            </td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{user.email}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{user.name}}</td>
            <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{user.mileage}}</td>
            <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" scope="row">
              <button mdbBtn color="warning" size="sm" mdbWavesEffect (click)="editRow(user, user.id)">Edit</button>
              <!-- <button mdbBtn color="danger" size="sm" mdbWavesEffect (click)="onDelete(user.id)">delete</button> -->
            </th>
          </tr>

modal.ts

export class ModalMileageComponent implements OnInit {
  users : User;
  public checkedList: {id: string};

  public usersForm: FormGroup = new FormGroup({
    id: new FormControl(''),
    mileage: new FormControl('')
  })

  constructor(public modalRef: MDBModalRef) { }

  ngOnInit(): void {
    console.log(this.checkedList.id); ///this console gives undefined value
    this.usersForm.controls['id'].patchValue(this.checkedList.id);
  }

}
0

There are 0 best solutions below