Search code examples
angularrxjscombinelatest

Concat 2 values of Angular 6 FormControl


I am creating a API path like http://api.example.com?startdate_30.12.2018&enddate_30.12.2018 where I am using 2 input date field to generate date values.

Here is my code:

    import { Component, OnInit } from '@angular/core';
    import { FormControl } from '@angular/forms';
    import { DefaultFilter } from './default-filter';
    import { merge, combineLatest } from 'rxjs';

    @Component({
      selector: 'date-filter',
      template: `
        <input type="date" [(ngModel)]="query" [formControl]="startDate" [ngClass]="inputClass" class="form-control">
        <input type="date" [formControl]="endDate" [ngClass]="inputClass" class="form-control">
     `,
    })
    export class DateFilterComponent extends DefaultFilter implements OnInit {
      startDate = new FormControl();
      endDate = new FormControl();
      constructor() {
        super();
      }
    ngOnInit() {
      this.changesSubscription = combineLatest(this.startDate.valueChanges, this.endDate.valueChanges).subscribe(([value1, value2]) => this.setFilter());
    }

I have used combineLatest to merge 2 Observables which produces an array as value, this.setFilter() uses string as value, How can change this to a string.

I have also used mergeMap but it didn't work.


Solution

  •  this.changesSubscription = combineLatest(this.startDate.valueChanges, this.endDate.valueChanges)
    .pipe(
      map(([value1, value2]) => value1 + value2)
    )
    .subscribe(value) => this.setFilter(value));