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

Question

I am writing an Angular application which uses ASP.Net Core as a backend, and bootstrap 4 and ngx-bootstrap for styling.

For some reason on all my HTML <label> tags (in every component/html file AND even though I have ID and Name attributes that match the "for" attribute of the <label> tag), the ID's are not found or recognized. I verified this by running the HTML through chrome dev tools lighthouse audit. Here is a sample of the code:

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

In this section for example:

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

The <input> attribute of id="swName matches the for="swName" attribute of the <label> tag, but it isn't being applied at all, as if the id="swName" does not exist.

How do I get the label to recongize the ID of the input tag?

Answer 1

This actually turned out to be an issue with Resharper not correctly seeing the ID/For relationship. After further testing using Chrome Dev Tools and Lighthouse, I realized that I did have a few other unrelated ID tags that were truly unresolved.

Once I resolved these, the errors in Lighthouse went away, but my IDE still showed errors. I have submitted a ticket to the JetBrains/ReSharper team. Screenshots attached.

IDE: Visual Studio Enterprise 2019 16.5.1

ReSharper: 2020.1 EAP 5

OS: Win 10

Link to issue: https://youtrack.jetbrains.com/issue/RSRP-478855

UPDATE: JetBrains/ReSharper were able to recreate the issue and confirm that this is a bug that will be fixed in a future release.

Screens: