Angular поле поиска не записывает значение для правильной переменной

Question

При просмотре формы выбранный ответ помещается в переменную событием (onSelectionChange). Но для обоих окон поиска кажется, что метод onSelectOrigin () вызывается дважды. Таким образом, только переменная selectedCityOrigin получает значение, а значение перезаписывается вторым полем поиска формы.

Я попытался добавить логическое значение, чтобы указать, из какого из двух полей поиска получено значение, но значение не интерпретируются, когда я добавляю его в HTML, например:

<mat-option *ngFor="let city of cities" [value]="city" (onSelectionChange)="onSelectDestination(city, false)">

Значение всегда истинно.

Это код, который я использую:

home.component.ts

selectedCityOrigin: Feature = null;
selectedCityDestination: Feature = null;

onSelectOrigin(place: string, origin: boolean) {
    this.selectedCityOrigin = this.cityList.find(city => city.text === place);
    console.log("origin", this.selectedCityOrigin);
    console.log("value", this.value);
    this.cities = [];
  }

onSelectDestination(place: string, origin: boolean) {
    this.selectedCityDestination = this.cityList.find(city => city.text === place);
    console.log("destination", this.selectedCityDestination);
    
    this.cities = [];
  }

home.component. html

<mat-step [stepControl]="firstFormGroup">
      
      <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>Destination</ng-template>
        <form class="stepper-content" [formGroup]="destination">
              <h2 class="text-center"><b>Where</b> do you want to go to ?</h2>
              <div class="search">
                <input 
                       formControlName="destinationControl"
                       type="text"
                       id="title"
                       class="form-control"
                       placeholder="I think Brussels is a good choice..."
                       [matAutocomplete]="auto"
                       (input)="search($event)">
              <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let city of cities" [value]="city" (onSelectionChange)="onSelectDestination(city)">
                  {{city}}
                </mat-option>
              </mat-autocomplete>
            <button type="submit" matStepperNext><i class="fa fa-search"></i>Search</button>
            </div>
        </form>
      </form>
    </mat-step>

    <mat-step [stepControl]="secondFormGroup">
      
      <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>City of living</ng-template>
        <form class="stepper-content" [formGroup]="origin">
              <h2 class="text-center">Where do you come from ?</h2>
              <div class="search">
                <input
                       formControlName="originControl"
                       type="text"
                       id="title"
                       class="form-control"
                       placeholder="I think Ghent is a good choice..."
                       [matAutocomplete]="auto"
                       (input)="search($event)">
              <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let city of cities" [value]="city" (onSelectionChange)="onSelectOrigin(city)">
                  {{city}}
                </mat-option>
              </mat-autocomplete>
            <button type="submit" matStepperNext><i class="fa fa-search"></i>Search</button>
            </div>
        </form>
      </form>
    </mat-step>
</mat-horizontal-stepper>

Как мне исправить это так, что каждое поле поиска записывает свое значение в свою собственную отвечающую переменную?