I am having trouble getting 2 auto-completers to work independently on the same form. I used separate methods and variables for them both but when I select an option for the first autocomplete, that selection seems to be used as filter criteria that is applied to the second auto complete. Should I have two instances of " @ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent;"?

Also, I am having issue getting the selected value committed to the form model. For example:

I would type "Acco" and then select the "Accounting" option. However, when the form is saved, only the value ("Acco" ) I explicitly typed is saved.

TS:

import { Component, ViewChild, AfterViewInit, Inject, LOCALE_ID } from "@angular/core";
import { formatDate } from "@angular/common";
import { ListItem, DataGroup, Client } from "../../api-client/app.generated";
import { MdbTableEditorDirective } from "mdb-table-editor";
import { MdbAutoCompleterComponent } from "ng-uikit-pro-standard"
import {
  FormGroup, FormControl, Validators
  //, ReactiveFormsModule
} from "@angular/forms";
import { of } from "rxjs";


@Component({
  selector: "app-data-groups-component",
  templateUrl: "./data-groups.component.html"
})

export class DataGroupsComponent implements AfterViewInit {
  @ViewChild("table") mdbTableEditor: MdbTableEditorDirective;
  @ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent;


  public availableAmsRoles = [""];

  public searchAmsRolesTextForMember = "";
  public amsRolesResultsForMember: any;
  public searchAmsRolesTextForAdmin = "";
  public amsRolesResultsForAdmin: any;



  constructor(private apiClient: Client
    , @Inject(LOCALE_ID) private locale: string) {
    this.dataGroupForm = this.createForm();

    this.apiClient.amsUserRoles_GetAmsUserRoles()
    .toPromise()
      .then((result: string[]) => {
        this.availableAmsRoles = result;
      });

    this.amsRolesResultsForMember = this.searchAmsRolesForMember(this.searchAmsRolesTextForMember);
    this.amsRolesResultsForAdmin = this.searchAmsRolesForAdmin(this.searchAmsRolesTextForAdmin);
  }


  public ngAfterViewInit() {
    this.completer.selectedItemChanged().subscribe((data: any) => {
      this.searchAmsRolesTextForMember = data.text;
      this.getFilteredAmsRolesForMember();

      this.searchAmsRolesTextForAdmin = data.text;
      this.getFilteredAmsRolesForAdmin();
    });

  }

  public searchAmsRolesForAdmin(term: string) {
    return of(this.availableAmsRoles.filter((data: any) => data.toString().toLowerCase().includes(term.toString().toLowerCase())));
  }

  public searchAmsRolesForMember(term: string) {
    return of(this.availableAmsRoles.filter((data: any) => data.toString().toLowerCase().includes(term.toString().toLowerCase())));
  }

  public getFilteredAmsRolesForMember() {
    this.amsRolesResultsForMember = this.searchAmsRolesForMember(this.searchAmsRolesTextForMember);
  }
  public getFilteredAmsRolesForAdmin() {
    this.amsRolesResultsForAdmin = this.searchAmsRolesForAdmin(this.searchAmsRolesTextForAdmin);
  }

  public onMemberChange() {
    this.getFilteredAmsRolesForMember();
  }

  public onAdminChange() {
    this.getFilteredAmsRolesForAdmin();
  }


  public onAdminSelect(role: string) {
    console.log("onAdminSelect");
    console.log(role);


    this.dataGroupForm.controls["amsAdminRole"].patchValue(role);
    this.dataGroupForm.controls["amsAdminRole"].updateValueAndValidity();
  }

  public onMemberSelect(role: string) {
    console.log("onMemberSelect");
    console.log(role);

    this.dataGroupForm.controls["amsMemberRole"].patchValue(role);
    this.dataGroupForm.controls["amsMemberRole"].updateValueAndValidity();
  }


 protected createForm(): FormGroup {
    return new FormGroup({

      amsAdminRole: new FormControl(null, Validators.required),
      amsMemberRole: new FormControl(null, Validators.required),

    });
  }

}

HTML:

        <div class="md-form input-group mb-5">
          <input mdbValidate
                 formControlName="amsAdminRole"
                 type="text"
                 class="completer-input form-control mdb-autocomplete mb-0"
                 (keydown)="searchAmsRolesTextForAdmin = $event.target.value"
                 (input)="getFilteredAmsRolesForAdmin()"
                 (ngModelChange)="onAdminChange()"
                 [mdbAutoCompleter]="autoAdmin"
                 placeholder="Enter the AMS function for admin access">
          <mdb-auto-completer #autoAdmin="mdbAutoCompleter" textNoResults="No roles match your criteria...">
            <mdb-option *ngFor="let option of amsRolesResultsForAdmin | async"
                        [value]="option"
                        (select)="onAdminSelect(option)">
              {{option}}
            </mdb-option>
          </mdb-auto-completer>
          <mdb-error *ngIf="amsAdminRole.invalid && (amsAdminRole.dirty || amsAdminRole.touched)">
          Please specify an AMS role
          </mdb-error>
        </div>




        <div class="md-form input-group mb-5">
          <input mdbValidate
                 formControlName="amsMemberRole"
                 type="text"
                 class="completer-input form-control mdb-autocomplete mb-0"
                 (keydown)="searchAmsRolesTextForMember = $event.target.value"
                 (input)="getFilteredAmsRolesForMember()"
                 (ngModelChange)="onMemberChange()"
                 [mdbAutoCompleter]="autoMember"
                 placeholder="Enter the AMS function for member access">
          <mdb-auto-completer #autoMember="mdbAutoCompleter" textNoResults="No roles match your criteria...">
            <mdb-option *ngFor="let option of amsRolesResultsForMember | async"
                        [value]="option"
                        (select)="onMemberSelect(option)">
              {{option}}
            </mdb-option>
          </mdb-auto-completer>

          <mdb-error *ngIf="amsMemberRole.invalid && (amsMemberRole.dirty || amsMemberRole.touched)">
            Please specify an AMS role
          </mdb-error>


        </div>
      </form>