Angular Загрузка новых значений автозаполнения при каждом событии выбора изменения

Question

У меня есть несколько наиболее важных полей в моей форме. В первой форме пользователь должен выбрать компанию с помощью mat-select-search. После этого с помощью (selectionChange) я вызываю API с выбранным значением в первом поле (это идентификатор компании) и возвращаю пользователей из этой компании для автозаполнения полей получателей. Это работает отлично, если пользователь не меняет свою выбранную компанию. Но если он это делает (selectionChange) метод не перезагружает автозаполнение с новым значением. Существует ситуация, когда у пользователя выбрана другая компания, и автозаполнение остается от предыдущего. Событие загружает новый, только если предыдущий вывод был пустым. Можно ли изменить это поведение? Может быть, можно удалить предыдущие результаты из вызова API?

Моя форма:

  <form [formGroup]="orderForm" novalidate (ngSubmit)="createOrder()">

                              <div class="row">
                                <div class="col-md-12">
                                  <mat-form-field class="example-full-width"  formGroupName='Company'>
                                    <mat-select ngDefaultControl  placeholder="Company" #singleSelect formControlName="id" (openedChange)="onSelectionChange($event)" [(value)]="selectedVariable">
                                    <mat-option>
                                      <ngx-mat-select-search [formControl]="companySelectFilter"  [searching]="searching" placeholderLabel="Find company..." noEntriesFoundLabel="'no matching companies found'" ></ngx-mat-select-search>
                                    </mat-option>
                                      <mat-option *ngFor="let company of filteredCompanies | async" [value]="company.id">
                                        {{company.company_name| titlecase}} {{company.company_address| titlecase}}
                                      </mat-option>
                                    </mat-select>
                                  <mat-error *ngIf="orderForm.hasError('notSame')">
                                    Recipient has another company! Select again.
                                  </mat-error>
                                  </mat-form-field>
                                </div>
                              </div>
<div class="row" matAutocompleteOrigin #origin="matAutocompleteOrigin">
                              <div class="col-md-6">

                                <mat-form-field class="example-full-width" formGroupName='recipient' >

                                  <input type="text"
                                   matInput  
                                    formControlName="user_name" 
                                    placeholder="First Name" 
                                    [matAutocomplete]="auto" 
                                     [matAutocompleteConnectedTo]="origin">
                                  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="setFormData($event)">
                                    <mat-option *ngFor="let recipient of filteredOptions | async" [value]="recipient">
                                      <div style="display:flex;flex-wrap: nowrap;align-items:center;justify-content:center;margin: auto;">
                                        <span style="flex-grow: 1;flex: 1 1 33%;"> {{recipient.user_name.toString() | titlecase}} {{recipient.user_surname.toString() | titlecase}} {{recipient.company.company_name.toString() | titlecase}}
                                          </span>
                                      </div>
                                    </mat-option>
                                  </mat-autocomplete>



                                 </mat-form-field>
                              </div>

                              <div class="col-md-6" >
                                <mat-form-field class="example-full-width" formGroupName='recipient'>
                                  <input matInput formControlName="user_surname"   placeholder="Last Name"[matAutocomplete]="auto"
                                          [matAutocompleteConnectedTo]="origin" >
                                          <mat-error *ngIf="orderForm.get('recipient.user_surname').hasError('required')">
                                            Last Name is <strong>required</strong>

                                          </mat-error>
                                </mat-form-field>
                              </div>
                          </div>
                          <div class="col-md-6" >
                            <mat-form-field class="example-full-width" formGroupName='recipient'>
                              <input matInput placeholder="Mobile Phone" type="text" formControlName="user_telephone" >
                            </mat-form-field>
                          </div>

Метод выбора OnSelected:

  onSelectionChange(opened: boolean) {
    console.log(`opened is : ${opened}`);
    if (!opened && this.selectedVariable) {

      this.orderForm.get('recipient.user_name').reset()
      this.orderForm.get('recipient.user_surname').reset()
      this.orderForm.get('recipient.user_telephone').reset()

      this.filteredOptions = this.orderForm
        .get('recipient.user_name')
      .valueChanges.pipe(
        startWith(""),
        debounceTime(400),
        distinctUntilChanged(),
        switchMap((val) => {
          return this.doFilter(this.selectedVariable, val || '');
        })
      );
          }
  } 

И метод doFilter:

doFilter(id: number, val: any): Observable<any[]> {
    return this.recipientService.getRecipientsByCompany(id).pipe(
      map((response) =>
        response.filter((option) => {
          return (
            option.user_name
              .toString()
              .toLowerCase()
              .indexOf(val.toString().toLowerCase()) === 0 ||
            option.user_surname
              .toString()
              .toLowerCase()
              .indexOf(val.toString().toLowerCase()) === 0
          );
        })
      )
    );
  }

Answer 1

Наконец-то я нашел решение. Моя ошибка заключалась в том, что я пытался извлечь данные из API после загрузки страницы. Теперь я загружаю всех получателей в метод NgOnInit и фильтрую данные после того, как пользователь меняет компанию.

Метод LoadRecipients, который мы помещаем в ngOnInit:

    this.recipientService
      .getRecipientsObs()
      .subscribe((recipients) => (this.recipients = recipients));
  }

И новый метод OnChange:

selectedVariable: any;
  onSelectionChange(opened: boolean) {
    console.log(`opened is : ${opened}`);
    console.log(this.selectedVariable)
    if (!opened && this.selectedVariable) {
      this.orderForm.get("recipient.user_name").reset();
      this.orderForm.get("recipient.user_surname").reset();
      this.orderForm.get("recipient.user_telephone").reset();
      const formsInput = merge(
        this.orderForm.get('recipient.user_name').valueChanges,
        this.orderForm.get('recipient.user_surname').valueChanges
      );
     formsInput.pipe(
        startWith(""),
        debounceTime(400),
        distinctUntilChanged(),
        map((search) => {
          if (!this.recipients) {
            return [];
          } else {
            search = search.toLowerCase();
          }

          return this.recipients.filter(
            (recipient) =>
              recipient.company.id === this.selectedVariable &&
              recipient.user_name.toLowerCase().indexOf(search) > -1 &&
              recipient.user_surname.toLowerCase().indexOf(search) > -1 
          );
        }),
        delay(500)
      )
      .subscribe(
        (filteredRecipients) => {
          this.searching = false;
          this.filteredRecipients.next(filteredRecipients);
        },
        (error) => {
          this.searching = false;
        }
      );
    }
  }