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?
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.