HTML <label> 标签/元素无法识别输入元素的“id”属性答案

【问题标题】：HTML <label> tag/element not recognizing "id" attribute of input elementHTML <label> 标签/元素无法识别输入元素的“id”属性
【发布时间】：2020-07-07 12:02:48
【问题描述】：

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

由于某种原因，在我所有的 HTML <label> 标签上（在每个组件/html 文件中，并且即使我的 ID 和 Name 属性与 <label> 标签的“for”属性匹配），找不到 ID或认可。我通过 chrome dev tools lighthouse audit 运行 HTML 验证了这一点。以下是代码示例：

<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？

【问题讨论】：

我也会尝试不使用骆驼案。这不是 HTML 标准。尝试使用 _ 或 - 作为分隔符。
如果您在浏览器的开发 (F12) 工具中检查呈现的 HTML，您是否看到正确的 ids？每个id 在页面中都是唯一的吗？
在开发工具栏的左侧，有一个“选择元素”工具（矩形内的箭头），也可以用Ctrl+Shift+C打开它（至少在Chrome和Firefox中）在 Windows 中）。单击页面中的目标元素以在开发工具窗口的“元素”或“检查器”选项卡中查看该元素。然后您可以检查 HTML 标记。
它们是独一无二的吗？如果将焦点放在开发工具窗口中，则可以按Ctrl+F 或Cmd+F 在呈现的HTML 中搜索特定字符串，例如swName。
避免该问题的一种方法是在label 中包含input 元素。然后将建立连接，而不依赖于id。

标签： html angular forms bootstrap-4 label

【解决方案1】：

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

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

IDE：Visual Studio Enterprise 2019 16.5.1

ReSharper：2020.1 EAP 5

操作系统：Win 10

问题链接：https://youtrack.jetbrains.com/issue/RSRP-478855

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

屏幕：

【讨论】：