I 'm trying to validate a lightning inputfield and throw custom error. Below is the code snippet for LWC and js file. I 'm getting the below error

html file 

<!-- Body -->
<div class="slds-p-horizontal_medium slds-m-top_medium">
<lightning-record-edit-form object-api-name="CaseContactRole">
<lightning-input-field
class="contactLookup"
field-name="ContactId"
onchange={contactLookupHandle}
>
</lightning-input-field>
</lightning-record-edit-form>
</div>

JS file

contactLookupHandle(event) {
this.selectedContactId = event.target.value;
this.validateFields();
}
validateFields() {
let inputfield = this.template.querySelector(".contactLookup");
console.log("Inputtttttttt::::::::::" + inputfield);
let inputValue = inputfield.value;
if (!inputValue) {
inputfield.reportValidity();
} else {
this.existingContactRoles.forEach((contactRole) => {
console.log("Contact Role from input :::::::::" + inputValue);
console.log(
"Contact Role already existing :::::::::" + contactRole.ContactId
);
if (inputValue === contactRole.ContactId) {
inputValue.setCustomValidity(
"This Contact has already been CC'd onto the Case."
);
}
});
}
}

 

Hi,

I 'm new to LWC and I 'm trying to create a hyperlink to the contact name and want to redirect it to the contact record page but somehow it redirecting to blank page. Below is the code  of my js file what I 'm trying to do. Any help is greatly appreciated.

import { LightningElement, api, track } from "lwc";
import executeSoql from "@salesforce/apex/LwcUtils.executeSoql";
import getSfdcDomainUrl from "@salesforce/apex/LwcUtils.getSfdcDomainUrl";
export default class CaseCollaborators extends LightningElement {
@api recordId;
@track caseContactRole;
@track caseTeamMember;
@track data = {};
error;
@track caseTeamMembercolumns = [
{
label: "Name",
fieldName: "Member.Url",
type: "url",
typeAttributes: {
label: {
fieldName: "Member.Name"
},
target: "_blank"
}
},
{ label: "Role", fieldName: "TeamRole.Name", type: "text" },
{ label: "Access Level", fieldName: "TeamRole.AccessLevel", type: "text" }
];
@track contactRolecolumns = [
{
label: "Name",
fieldName: "Contact.Url",
type: "url",
typeAttributes: {
label: {
fieldName: "Contact.Name"
},
target: "_blank"
}
},
{ label: "Email", fieldName: "Contact.Email", type: "text" }
];
connectedCallback() {
this.getCaseContactRoles();
this.getCaseTeamMemberRoles();
}
getCaseContactRoles = () => {
let baseUrl = getSfdcDomainUrl();
executeSoql({
query: `
SELECT ContactId, Contact.Name, Contact.Email
FROM CaseContactRole
WHERE Role = 'Other Googler Involved'
AND CasesId = '${this.recordId}'
`
})
.then((result) => {
console.log(result);
this.caseContactRole = result.map((item) => ({
"Contact.Name": item.Contact.Name,
"Contact.Email": item.Contact.Email,
"Contact.Url": baseUrl + item.ContactId
}));
console.log(baseUrl);
})
.catch((error) => {
console.error(error);
});
};
getCaseTeamMemberRoles = () => {
let baseUrl = getSfdcDomainUrl();
console.log(baseUrl);
executeSoql({
query: `
SELECT MemberId, Member.Name, TeamRole.Name, TeamRole.AccessLevel
FROM CaseTeamMember
WHERE ParentId = '${this.recordId}'
`
})
.then((result) => {
console.log(result);
this.caseTeamMember = result.map((item) => ({
"Member.Name": item.Member.Name,
"Member.Url": baseUrl + item.MemberId,
"TeamRole.Name": item.TeamRole.Name,
"TeamRole.AccessLevel": item.TeamRole.AccessLevel
}));
})
.catch((error) => {
console.error(error);
});
};
get shouldRenderCaseContactTable() {
return this.caseContactRole?.length > 0;
}
get shouldRenderCaseTeamMemberRoleTable() {
return this.caseTeamMember?.length > 0;
}
}


 

I 'm trying to validate a lightning inputfield and throw custom error. Below is the code snippet for LWC and js file. I 'm getting the below error

html file 

<!-- Body -->
<div class="slds-p-horizontal_medium slds-m-top_medium">
<lightning-record-edit-form object-api-name="CaseContactRole">
<lightning-input-field
class="contactLookup"
field-name="ContactId"
onchange={contactLookupHandle}
>
</lightning-input-field>
</lightning-record-edit-form>
</div>

JS file

contactLookupHandle(event) {
this.selectedContactId = event.target.value;
this.validateFields();
}
validateFields() {
let inputfield = this.template.querySelector(".contactLookup");
console.log("Inputtttttttt::::::::::" + inputfield);
let inputValue = inputfield.value;
if (!inputValue) {
inputfield.reportValidity();
} else {
this.existingContactRoles.forEach((contactRole) => {
console.log("Contact Role from input :::::::::" + inputValue);
console.log(
"Contact Role already existing :::::::::" + contactRole.ContactId
);
if (inputValue === contactRole.ContactId) {
inputValue.setCustomValidity(
"This Contact has already been CC'd onto the Case."
);
}
});
}
}