function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Phuc Nguyen 18Phuc Nguyen 18 

LWC show fields based on radio button selection

Trying to show fields base don radio button selection:  I know this works but its for any value selected.  How can I make it work for a specific radion button value? 
<lightning-radio-group name="TradioGroup"
                          label="Type"
                          options={options1}
                          value={selectedValue}
                          onchange={handleChange1}
                          type="radio">
</lightning-radio-group>
<div if:true={selectedValue}></div>
    <lightning-input-field field-name="Amount__c">
    </lightning-input-field>
</div>

 
Best Answer chosen by Phuc Nguyen 18
David Zhu 🔥David Zhu 🔥
You may refer the code below:
in html: 
replace <div> section with 
<template  if:true={fieldVisible}>
   <lightning-input-field field-name="Amount__c">
  </lightning-input-field>
</<template>
in js, add logic to handleChange1 method. 
    @track fieldVisible = false;

    handleChange1(event) {
        const selectedOption = event.detail.value;
        if (selectedOption == 'option1')
        {
            this.fieldVisible = true;
        }
        else
        {
            this.fieldVisible = false;
        }
        
    }


 

All Answers

David Zhu 🔥David Zhu 🔥
You may refer the code below:
in html: 
replace <div> section with 
<template  if:true={fieldVisible}>
   <lightning-input-field field-name="Amount__c">
  </lightning-input-field>
</<template>
in js, add logic to handleChange1 method. 
    @track fieldVisible = false;

    handleChange1(event) {
        const selectedOption = event.detail.value;
        if (selectedOption == 'option1')
        {
            this.fieldVisible = true;
        }
        else
        {
            this.fieldVisible = false;
        }
        
    }


 
This was selected as the best answer
David Zhu 🔥David Zhu 🔥
It should not. the idea is to use property fieldVisible ton control the visibility of the field(s). in js method, fieldVisible is updated based on radio group selection. 
Phuc Nguyen 18Phuc Nguyen 18
That works well.  If you know how to render multiple picklist values in a LWC please take a look at my other question
https://developer.salesforce.com/forums/ForumsMain?id=9062I000000QzZkQAK