标签上的角度"for"属性仅适用于第一个输入

Question

我正在学习Angular，并有一个小的测试组件(Angular 9-使用CLI全新安装(。

我有两个输入，并试图通过将id放在"for"属性中来将每个标签与其输入相关联(我知道你也可以将字段包装在标签中(。这适用于第一个输入；单击标签会将焦点设置为输入。但是，单击第二个标签也会将焦点设置为第一个输入。如果我交换输入的位置并不重要，行为是一样的。

为什么会这样？总的来说，有更好的方法吗？我觉得我错过了什么。

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>

补充库存组件.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

尝试使用普通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>