lundi 8 juillet 2019

How to get checked checkboxes and pass them in a REST request angular 7

I want to add checked check boxes to an array which will be part of a REST call request. I have 4 categories of logs and I want to tell the back-end display this and this category of logs based on the selected categories by user. By default they are all checked.

My checkboxes is something like that :

    <div class="custom-control custom-checkbox squaredThree" *ngFor="let 
    category of categories">
            <input type="checkbox" class="custom-control-input" id="" 
            (change)="uncheckChangeHandler($event)" checked>
            <label class="custom-control-label" for="" >  </label> 
          </div>

My .ts file :

export class FilterBarComponent implements OnInit, OnDestroy {
  filterParam: any = filterDataObject;
  filtredLogs: Ilogs[];
  form: FormGroup;
  categories = [
    { id: '1', name: 'debug' },
    { id: '2', name: 'info' },
    { id: '3', name: 'warning' },
    { id: '4', name: 'error' }
  ];


  constructor(private sharedService: SharedDataService, private 
logsService: HttpClientTestService,
          private formBuilder: FormBuilder) {

    this.form = this.formBuilder.group({
      categories: new FormArray([])
    });
   }

  ngOnInit() {
     this.filterParam.limit = this.selectedLimit;
     this.filterParam.sort = this.selectedSort;
     for (let i = 0; i <= this.categories.length; i++) {
        this.filterParam.category.push(this.categories[i].name);
     }
  }

   uncheckChangeHandler(event: any) { 
   // code to delete the unchecked item from category array
  }

the structure of my filter array which will be sent to the server:

export const filterDataObject = [{
   date: '',
   className: '',
   userName: '',
   category: [],
   limit: '50',
   sort: 'acs'
  }];

the error I got is

  ERROR TypeError: Cannot read property 'push' of undefined 

Can you please help me to write the content of ngOnInit() to put all categories in the request and the content of uncheckChangeHandler() method I tried to push all elements and delete the unchecked item and didn't work




Aucun commentaire:

Enregistrer un commentaire