Проверка поля автозаполнения материала в Angular 5

Мы разрабатываем наше приложение Angular 5 с использованием материала Angular. у нас есть 2 набора из 4 похожих полей типа автозаполнения. Мы реализовали использование полей автозаполнения материалов.

первый набор из 4 полей используется для получения сведений о клиенте. второй набор полей извлекает сведения о клиенте, но видимость второго набора необязательно контролируется флажком. Функционал работал нормально. Но когда я реализовал принудительный выбор с помощью подписки tag:MatAutocompleteTrigger, первый набор полей работает нормально. В то время как второй набор полей при загрузке должен быть невидимым только тогда, когда установлен флажок, второй набор полей станет видимым.

Из-за чего возникает ошибка, я размещаю фрагмент кода, где возникает ошибка. Я просто показываю здесь для одного поля altCustomerName с идентификатором altCustomerNameId. Я попытался сделать это значение id равным true на tag:ngOnInit и установить на false на tag:ngAfterViewInit. Но это тоже заканчивается ошибкой.

HTML (просмотр)

<mat-form-field>
     <input placeholder="Customer Name" type="text" #altCustomerNameId matInput [formControl]="altCustomerNameControl" [(ngModel)]='selectedAltCustomerName' [matAutocomplete]="altCustomerName" required>
     <mat-autocomplete #altCustomerName="matAutocomplete" class='customerDetails'>
        <mat-option (click)="setAltCustomerDetails(altCustomer)" *ngFor="let altCustomer of filteredAltCustomersByName | async" [value]="altCustomer.name">
                    {{ altCustomer.custnum + ' ' + altCustomer.name + ' '+ altCustomer.countryname }}
        </mat-option>
     </mat-autocomplete>
</mat-form-field>                 

Код компонента: (внутри класса объявлен altCustomerNameControl)enter code here

@ViewChild('altCustomerNameId', {
            read: MatAutocompleteTrigger
})
altCustomerNameTrigger: MatAutocompleteTrigger;
        ..
        ....
        ....
ngAfterViewInit() {
    this._subscribeToClosingActions();
}
ngOnDestroy() {
      ....
   if(this.altCustomerNameSubscription &&
       !this.altCustomerNameSubscription.closed)
    .....
}

this.altCustomerCodeSubscription = this.altCustomerCodeTrigger.panelClosingActions.subscribe(
   event => {
      if (!event || !event.source) {
          this.altCustomerNameControl.setValue('');
          this.altCustomerCodeControl.setValue('');
          this.selectedAltCustomerName = '';
          this.selectedAltCustomerCode = '';
          this.selectedAltCustomerCountry = '';
       }
   },err => this._subscribeToClosingActions(),
      () => this._subscribeToClosingActions()
);

Пожалуйста, дайте мне знать, если вам нужны какие-либо разъяснения в коде.