Элемент метки внутри компонента - PullRequest
Новая
       9

Элемент метки внутри компонента

0 голосов
/ 26 февраля 2020

Когда я запускаю Lighthouse в своем локальном проекте, он возвращает следующее:

Элементы формы не имеют связанных меток

Для входов, которые я использовал id="<input_id>" , добавив for="<input_id>" к своей метке. Но теперь у меня есть компонент для выбора страны, который отвечает за загрузку списка стран. 

<form name="notificationDetailForm" [formGroup]="form">
  <div class="key-input">
    <label for="country-label">Country</label>
    <country-selector id="country-label" formControlName="country"></country-selector>
  </div>
</form>

Итак, метка отделена от тега выбора, который находится внутри компонента country-selector: 

<select [(ngModel)]="selectedCountry">
  <option [ngValue]="null" disabled selected>-- Select country --</option>
  <option *ngFor="let country of countries$ | async" [ngValue]="country">
    {{ country.name }}
  </option>
</select>

Я пытался использовать aria-labelledby в компоненте формы, но это то же самое.

У меня вопрос: как сделать так, чтобы метка ссылалась на тег select внутри компонента?

Спасибо!

1 Ответ

1 голос
/ 26 февраля 2020

Вы можете передать его через свойство ввода

country-selector.ts 

@Input() controlId: string;

country-selector. html (прочее html

<select [id]="controlId" [(ngModel)]="selectedCountry">
  <option [ngValue]="null" disabled selected>-- Select country --</option>
  <option *ngFor="let country of countries$ | async" [ngValue]="country">
    {{ country.name }}
  </option>
</select>

parent. html

<country-selector controlId="country-label" formControlName="country">
</country-selector>

Возможно, вам придется сделать то же самое с formControlName - избегайте использования @Input() имен свойств, таких как sh с именами директив Angular .

Проблема вашего подхода заключается в том, что вы присваиваете идентификатор самому родительскому элементу управления (проверяете генерируемый HTML). Таким образом, метка никогда не ассоциируется с <select>.

...