You need to sign in to do that
Don't have an account?
Sukriti Sharma
Changing the contents displayed using LWC Radio Button
I want specific input fields to display when I click on either of the option. So far I have finished writing the HTML code but I can't get the JS code right. It shows an error on the salesforce page. Please help me write the logic for it.
accountOrContact.html
<template> <lightning-card title="CREATE NEW"> <lightning-radio-group name="Create New" options={options} value={value} type="button" onchange={handleChange}> </lightning-radio-group> <template if:true={value1}> <div class="slds-m-around_small"> <lightning-record-edit-form onsuccess={handleSuccess}> <lightning-input-field field-name="Name" name="name" ></lightning-input-field> <lightning-input type="tel" label="Contact Info" name="phone3"></lightning-input> <lightning-input type="checkbox" label="Create Contact" name="CreateContact"></lightning-input> <lightning-button type="submit" name="submit" label="Create Account" onclick={handleClick} variant="brand"> </lightning-button> </lightning-record-edit-form> </div> </template> <template if:true={value2}> <div class="slds-m-vertical_medium"> <lightning-record-edit-form onsuccess={handleSuccess}> <lightning-input-field field-name="Name" name="name" ></lightning-input-field> <lightning-input-field field-name="Contact Info" name="phone" ></lightning-input-field> <lightning-button type="submit" name="submit" label="Create Contact" onclick={handleClick} variant="brand"> </lightning-button> </lightning-record-edit-form> </div> </template> </lightning-card> </template>
accountOrContact.js
import { LightningElement, track, api } from 'lwc'; export default class AccountOrContact extends LightningElement { @track optionSelected; value = 'account'; getSelection(event) { this.optionSelected = event.detail.value; } get value1(){return this.optionSelected == 'Account'} get value2(){return this.optionSelected == 'Contact'} get options() { return [ { label: 'Account', value: 'value1' }, { label: 'Contact', value: 'value2' }, ]; } }