0

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>
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)
    – Nick C
    Jan 30, 2023 at 4:12
  • Nick I am trying to perform a custom validation. Jan 30, 2023 at 4:37

2 Answers 2

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
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);
    }
2
  • 1
    This appears to be largely the same as the existing answer from Mukul (from about 10 months ago).
    – Derek F
    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.
    – Sachu S
    Jan 30 at 4:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .