Динамически добавляемый hintLabel в поле mat-form-field становится видимым только после того, как компонент получает фокус

Question

У меня есть два поля выбора. Когда значение выбрано в первом окне выбора, делается запрос к серверу для заполнения второго поля выбора. Поскольку этот второй вызов занимает ~ 10 секунд по независящим от меня причинам, я хочу показать подсказку, которая говорит что-то вроде: «Пожалуйста, подождите, загружая XYZ с сервера».

В первом окне выбора для события изменения изменения настроен обработчик событий, и он правильно устанавливает подсказку во втором окне. Однако второе поле не показывает подсказку, пока не получит фокус. (Если я попытаюсь поместить подсказку в первое поле, она сразу же покажет подсказку, поскольку она уже имеет фокус.)

Я использую Angular CLI 7.0.2, Angular 7.0.0 и узел 8.11.1.

Компонент тс:

@ViewChild("otherSelect")
secondSelect: MatFormField;

onFirstThingSelect(event: MatSelectChange ) {
 this.secondSelect.hintLabel = "Please wait, loading...";
 // expensive/slow call to populate secondSelect goes here
}

Компонент html:

<mat-form-field #firstSelect>
  <mat-select placeholder="First Thing" (selectionChange)="onFirstThingSelect($event)">
    <mat-option *ngFor="let first of firstThings$ | async" [value]="first">
      {{first}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="col-md-4" #otherSelect>
  <mat-select placeholder="Second Thing">
    <mat-option *ngFor="let second of secondThings$ | async" [value]="second">
      {{second}}
    </mat-option>
  </mat-select>
</mat-form-field>

Рабочий стекблиц: https://stackblitz.com/edit/angular-fkjd8m-qm8mxp

Очевидно, что это не то, для чего изначально был создан matHint (или hintLabel). Но как я могу заставить подсказку показывать второй выбор после заполнения первого? Должен ли я добавить ViewChild для фактического второго выпадающего списка и наложить на него фокус?

Answer 1

Вместо того, чтобы пытаться динамически установить hintLabel @Input, свяжите его с переменной и динамически установите содержимое переменной:

<mat-form-field class="col-md-4" [hintLabel]="hintLabel">
  <mat-select placeholder="Second Thing">
    <mat-option *ngFor="let second of secondThings$ | async" [value]="second">
      {{second}}
    </mat-option>
  </mat-select>
</mat-form-field>


hintLabel = '';

onFirstThingSelect(event: MatSelectChange ) {
  this.hintLabel = "I should become visible when First Thing is selected.";
}

Answer 2

почему бы не использовать "placeHolder". Вы можете использовать «тап» во втором, чтобы показать разные значения. Если this.secondThing возвращает нулевое значение, потому что загружает данные, в противном случае вы увидите сообщение типа «Выбрать опцию».

см. ваш разветвленный стек

Важная часть:

this.secondThings$ = this._seconds.asObservable().pipe(tap((res) => {
      if (!res)
        this.secondPlaceHolder.placeHolder = "Loadding data...";
      else
        this.secondPlaceHolder.placeholder = "Select Option.";

    }))

Когда происходит изменение, сначала отправьте ноль

  onFirstThingSelect(event: MatSelectChange) {
    this._seconds.next(null); //<--send a null before loading the data
    setTimeout(() => {
      this._seconds.next(["AA", "BB", "CC"]);
    }, 2000)
  }

Answer 3

Вы можете статически назначить подсказку mat в вашем шаблоне и отображать ее, используя логическую переменную, а не подсказку поля формы mat ... таким образом, вы можете отобразить подсказку и скрыть ее программно без фокуса.

https://stackblitz.com/edit/angular-fkjd8m-przarn?embed=1&file=app/form-field-overview-example.html