Angular атрибут for для метки работает только при первом вводе

Question

Я учусь Angular и у меня небольшой тестовый компонент (Angular 9 - fre sh установка с использованием CLI).

У меня есть два входа, и я пытаюсь связать каждую метку с ее введите идентификатор в атрибуте for (я знаю, что вы также можете обернуть поле в метке). Это работает для первого ввода; щелчок по метке установит фокус на ввод. Однако нажатие на вторую метку также установит фокус на ввод first . Не имеет значения, если я поменяю местами входы, поведение будет таким же.

С чего бы это? Есть ли лучший способ сделать это в целом? Я чувствую, что что-то упустил.

restool.component. html

<div>
    <label [for]="origin">Origin</label>
    <input [formControl]="origin" [attr.id]="origin">
</div>
<div>
    <label [for]="destination">Destination</label>
    <input [formControl]="destination" [attr.id]="destination">
</div>

restool.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-restool',
  templateUrl: './restool.component.html',
  styleUrls: ['./restool.component.css']
})
export class RestoolComponent implements OnInit {

  origin = new FormControl('');
  destination = new FormControl('');

  constructor() {

   }

  ngOnInit(): void {
  }

}

Answer 1

Попробуйте использовать stock HTML, возможно, destination и origin являются типами объектов.

<div>
    <label for="origin">Origin</label>
    <input [formControl]="origin" id="origin">
</div>
<div>
    <label for="destination">Destination</label>
    <input [formControl]="destination" id="destination">
</div>