Angular6 NGXS, search filter

admin.component.html

<div class="container">
  <form class="from col-auto" #s="ngForm">
    <div class="form-row align-items-center">
      <div class="col-auto">
        <label class="sr-only" for="inlineFormInput">Name</label>
        <input type="text" class="form-control mb-2" 
          name="username" ngModel placeholder="User Name">
      </div>
      <div class="col-auto">
        <input type="date" class="form-control mb-2" name="date" ngModel>
      </div>
      <div class="col-auto">
        <select class="custom-select form-control mb-2" name="status" ngModel>
            <option value="">ALL</option>
            <option value="APPROVED">APPROVED</option>
            <option value="REJECTED">REJECTED</option>
            <option value="PENDING">PENDING</option>
        </select>
      </div>
    </div>
  </form>
  <div class="col-auto">
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope=""col>Create Date</th>
          <th scope=""col>Start Point</th>
          <th scope=""col>End Point</th>
          <th scope=""col>Passengers</th>
          <th scope=""col>Status</th>
          <th scope=""col>User</th>
        </tr>
      </thead>
      <tbody> 
          <tr *ngFor="let request of request$ | async" (click)="onSelect(request._id)" style="cursor: pointer;">
              <td scope="row">{{request.createdAt | date: 'medium' }}</td>
              <td scope="row">{{request.startPoint}}</td>
              <td scope="row">{{request.endPoint}}</td>
              <td scope="row">{{request.passengers}}</td>
              <td scope="row">{{request.status}}</td>
              <td scope="row">{{request.username}}</td>
            </tr>
      </tbody>
    </table>
  </div>
</div>

admin.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { Request } from '../trips/request.model';
import { Store } from '@ngxs/store';
import { AppState } from '../ngxs/app.state';
import { NgForm } from '@angular/forms';
import { filter, tap, map, flatMap, debounceTime } from 'rxjs/operators';
import { Router } from '@angular/router';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

  @ViewChild('s') adminForm: NgForm;
  request$: Observable<Request[]>;

  constructor(private store: Store, private router: Router ) {
   }

   onSelect(_id: string) {
    console.log(_id);
    this.router.navigate([`admin/${_id}`]);
   }

  ngOnInit() {
    this.adminForm.valueChanges.pipe(debounceTime(400)).subscribe(
      (fromData) => {
        this.request$ = this.store.select(AppState.adminFilter(fromData));
      }
    );
  }

}

app.state.ts

@Selector()
    static adminFilter(searchObj: any) {
        return createSelector([AppState], (state: any) => {
            const req = state.app.requests;
            console.log(searchObj);
            return req
            .filter((r) => {
                return r.username.includes(searchObj.username);
            }).filter((r) => {
                if (searchObj.status) {
                    return r.status === searchObj.status;
                }
                return r;
            }).filter((r) => {
                if (searchObj.date) {
                    return new Date(r.createdAt).getDate() === ( new Date(searchObj.date).getDate() + 1);
                } else {
                    console.log(searchObj.date);
                    if (!searchObj.date) {
                        return r;
                    }
                }
            });
        });
    }

Thinks for sharing. Thinking we can further automate form-store binging with @ngxs/form-plugin