HTML <label> tag/element 无法识别输入元素的 "id" 属性

Question

我正在编写一个 Angular 应用程序，它使用 ASP.Net Core 作为后端，并使用 bootstrap 4 和 ngx-bootstrap 进行样式设置。

出于某种原因，在我的所有 HTML <label> 标签上（在每个 component/html 文件中，即使我的 ID 和 Name 属性与 "for" 属性相匹配<label> 标签），未找到或识别 ID。我通过运行和 HTML 通过 chrome 开发工具灯塔审核验证了这一点。这是代码示例：

<div class="modal-header">
    <h4 class="fa-pull-left modal-title" id="modalTitle">{{title}}</h4>
</div>
<div class="modal-body" id="modalBody">
    <form id="modalForm">
        <div class="form-group">
            <label for="swName">Name</label>
            <input id="swName" name="swName" [(ngModel)]="switchman.Name" class="form-control" type="text" />
        </div>
        <div class="form-group">
            <label for="eid">EID</label>
            <input [(ngModel)]="switchman.Eid" class="form-control" id="eid" name="eid" type="text" />
        </div>
        <div class="form-group">
            <label for="homeOffice">Home Office</label>
            <input [(ngModel)]="switchman.HomeOffice" class="form-control" id="homeOffice" name="homeOffice" type="text" />
        </div>
<div class="modal-footer">
    <button (click)="accept()" class="btn btn-success mr-auto" type="button">
        Submit
    </button>
    <button (click)="reject()" class="btn btn-danger" type="button">
        Cancel
    </button>
</div>

以本节为例：

<form id="modalForm">
        <div class="form-group">
            <label for="swName">Name</label>
            <input id="swName" name="swName" [(ngModel)]="switchman.Name" class="form-control" type="text" />
        </div>

id="swName 的 <input> 属性与 <label> 标签的 for="swName" 属性匹配，但根本没有应用，就好像 id="swName"不存在。

如何获取标签以识别输入标签的 ID？

Answer 1

这实际上是 Resharper 没有正确看到 ID/For 关系的问题。在使用 Chrome Dev Tools 和 Lighthouse 进行进一步测试后，我意识到我确实有一些其他真正未解析的不相关 ID 标签。

一旦我解决了这些问题，Lighthouse 中的错误就消失了，但我的 IDE 仍然显示错误。我已经向 JetBrains/ReSharper 团队提交了一张票。附上截图。

IDE: Visual Studio 企业版 2019 16.5.1

ReSharper：2020.1 EAP 5

OS: 赢 10

Link 发出：https://youtrack.jetbrains.com/issue/RSRP-478855

更新：JetBrains/ReSharper 能够重新创建问题并确认这是一个将在未来版本中修复的错误。

屏幕：

HTML <label> tag/element 无法识别输入元素的 "id" 属性

HTML <label> tag/element not recognizing "id" attribute of input element

html

forms

label

bootstrap-4

angular