1

I want to have a button on my LWC to validate the values of my lightning-input-field's and lightning-input fields.
I am trying to return the value of my lightning-input-fields based on the field-name attribute, but receive the error - [Cannot read properties of null (reading 'value')] (Test 1). I am able to retrieve the values if I use a class (Test 2).

JS

handleValidate(event){
        const test1 = this.template.querySelector('[field-name="CurrentBaseLow__c"]').value;
        console.log('Test 1 = ' + test1);
        
        const test2 = this.template.querySelector('.test').value;
        console.log('Test 2 = ' + test2);
    }

HTML

<template>
  <lightning-record-edit-form record-id={recordId} object-api-name="Match__c" onerror={handleError}>
    <lightning-input-field field-name="CurrentBaseLow__c" disabled={fieldDisabled} onchange={handleChange} class="validate test"></lightning-input-field>    
    <lightning-input type="number" name="currentBaseHigh" label="Base High (K)" value={currentBaseHigh} onchange={handleChange}></lightning-input>                                                              
  </lightning-record-edit-form>
  <lightning-button variant="brand" label="Validate" onclick={handleValidate} class="slds-p-left_x-small"></lightning-button>
</template>
Improve this question
2
  • Are you trying to perform some custom validation? Or just making sure it's valid based on the fields definition? (ie. it's got a value when it's a required field) Commented Jan 30, 2023 at 4:12
  • Nick I am trying to perform a custom validation. Commented Jan 30, 2023 at 4:37

2 Answers 2

Reset to default
2

QuerySelector will not work on the name attribute as lightning-input tags don't have the name attribute, the internal input tag has the name attribute which is not accessible due to the LightningLocker. If you want to access the lwc tags, I suggest you use the data attribute. data-*

For ex.-

<template>
    <lightning-record-edit-form object-api-name="Contact">
        <lightning-messages></lightning-messages>
        <lightning-input-field field-name="LastName"  data-name="lastname"></lightning-input-field>
      
         <lightning-input data-name="some"></lightning-input>
        
        
        </lightning-button>
        <lightning-button class="slds-m-top_small" variant="brand"  label="validate" onclick={handleValidation}>
        </lightning-button>
    </lightning-record-edit-form>
</template>

this.template.querySelector('lightning-input-field[data-name="lastname"]').value;

this.template.querySelector('lightning-input[data-name="some"]').value
Improve this answer
2
-2

You can use data-id attribute for fetching the data from lightning-input-field/Any other Lightning Field...

HTML & JS

<template>
  <lightning-record-edit-form record-id={recordId} object-api-name="Match__c" onerror={handleError}>
    <lightning-input-field data-id="CurrentBaseLow__c" disabled={fieldDisabled} onchange={handleChange} class="validate test"></lightning-input-field>    
    <lightning-input type="number" name="currentBaseHigh" label="Base High (K)" value={currentBaseHigh} onchange={handleChange}></lightning-input>                                                              
  </lightning-record-edit-form>
  <lightning-button variant="brand" label="Validate" onclick={handleValidate} class="slds-p-left_x-small"></lightning-button>
</template>

handleValidate(event){
        const test1 = this.template.querySelector('lightning-input-field[data-id=CurrentBaseLow__c]').value;
        console.log('Test 1 = ' + test1);
    }
Improve this answer
2
  • 1
    This appears to be largely the same as the existing answer from Mukul (from about 10 months ago). Commented Oct 3, 2023 at 11:26
  • Mukul is trying to get the value of the field using the data-name but that was not worked for me when i am trying with data-name. There is an difference in my code I am getting the value of the field with data-id property That was worked for me. Commented Jan 30, 2024 at 4:54

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.