Как объединить поля поиска и поиска данных с помощью mat-inout

Question

У меня в окне поиска есть поле поиска mat 3. Я могу искать записи о клиентах, используя имя, фамилию или идентификатор клиента.Результаты поиска возвращают мне таблицу подходящих клиентов вместе с их информацией.Предположим, что я ищу по имени, результат возвращает мне 12 результатов, и если я ищу по фамилии, я получаю 5 результатов.Я хочу иметь возможность поиска, комбинируя имя и фамилию, чтобы сделать список поиска небольшим и более эффективным.Как мне достичь этого

HTML-код для поиска

  <!-- Search Record by Individual Customer First Name -->
  <div class="col-sm">
    <form role="search">
      <div class="form-group add-on">
        <label style="color: black"> First Name:</label>
        <input class="form-control" placeholder="Search..." name="srch-term" [(ngModel)]="firstNameValue" type="text" />
        <div class="input-group-btn">
          <button class="btn btn-default" (click)="searchByFirstName()"><i class="fa fa-search"></i></button>
        </div>
      </div>
    </form>
  </div>

  <!-- Search Recod by Individual Customer Last Name -->
  <div class="col-sm">
    <form role="search">
      <div class="form-group add-on">
        <label style="color: black"> Last Name:</label>
        <input class="form-control" placeholder="Search..." name="srch-term" [(ngModel)]="lastNameValue" type="text" />
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit" (click)="searchByLastName()"><i class="fa fa-search"></i></button>
        </div>
      </div>
    </form>
  </div>

Машинописный код для поиска:

 searchByFirstName() {
this.isLoadingResults = true;
this.customer360Service.getCustbyFirstName(this.firstNameValue).subscribe(
  data => {
    this.sampleData = data;
    this.customerSearchRecord = this.sampleData;
    this.customerSearchRecordList = new MatTableDataSource<Customer>(this.customerSearchRecord);
    console.log(this.customerSearchRecord);
    this.isLoadingResults = false;
    this.showIndTable = true;
    this.customerSearchRecordList.connect().subscribe(list => this.columnListChange.emit(list));
    this.customerSearchRecordList.paginator = this.paginator;
    this.customerSearchRecordList.sort = this.sort;
  },
  err => {
    this.snackbar.open('Customer Record Not Found', 'Close', {
      duration: 5000
    });
  }
);
}


searchByLastName() {
this.customer360Service.getCustbyLastName(this.lastNameValue).subscribe(
  data => {
    this.sampleData = data;
    this.customerSearchRecord = this.sampleData;
    this.customerSearchRecordList = new MatTableDataSource<Customer>(this.customerSearchRecord);
    console.log('Last Name', this.customerSearchRecord);
    this.showIndTable = true;
    this.customerSearchRecordList.paginator = this.paginator;
    this.customerSearchRecordList.sort = this.sort;
  },
  err => {
    this.snackbar.open('Customer Record Not Found', 'Close', {
      duration: 5000
    });
  }
);