how do i create dependent picklist in lighning web component(LWC) when creating a record[SOLVED]

Question

JS:

@wire(getPicklistValues, {
        recordTypeId: '$objectInfo.data.defaultRecordTypeId', 
        fieldApiName : COUNTRY_FIELD})  picklistValuescon;
@wire(getPicklistValues, {
        recordTypeId: '$objectInfo.data.defaultRecordTypeId', 
        fieldApiName : CITY_FIELD})  picklistValuescity;

HTML:

<template if:true={picklistValuescon.data}>
                    <lightning-combobox
                        style="width: 200px;"
                        value={picklistValuescon.data.values}
                        options={picklistValuescon.data.values}
                        placeholder="Select an Option"
                        label="Country"
                        onchange={handlecountryChange}
                    ></lightning-combobox>
                    <lightning-combobox
                        style="width: 200px;"
                        value={picklistValuescity.data.values}
                        options={picklistValuescity.data.values}
                        placeholder="Select an Option"
                        label="City"
                        onchange={handlecityChange}
                    ></lightning-combobox>
                </template>

Answer 1

Option 1: (RECOMMENDED) When both the controlling and dependent picklist fields are present in record-edit-form, dependent picklist options are updated automatically when you select an option in controlling field

<lightning-record-edit-form object-api-name="Account">
    <lightning-messages>
    </lightning-messages>
    <lightning-input-field field-name="Name">
    </lightning-input-field>
    <lightning-input-field field-name="UpsellOpportunity__c">
    </lightning-input-field>
    <lightning-input-field field-name="SLA__c">
    </lightning-input-field>
    <lightning-button class="slds-m-top_small"
                      variant="brand"
                      type="submit"
                      name="update"
                      label="Update">
    </lightning-button>
</lightning-record-edit-form>

Here SLA__c is dependent on UpsellOpportunity__c.

---

Option-2: Get the picklist values from getPicklistValues and implement custom logic using combobox

You will get the data about controllerValues and validFor in dependent picklist field. You can use the change handler of controlling field to set the options for dependent field. Below is the example:

HTML:

<template>
    <lightning-combobox name="Upsell"
                        label="Upsell"
                        placeholder="Select Upsell"
                        options={upsellOptions}
                        onchange={handleUpsellChange}>
    </lightning-combobox>
    <lightning-combobox name="Sla"
                        label="Sla"
                        placeholder="Select Sla"
                        options={slaOptions}>
    </lightning-combobox>
</template>

JS:

import { LightningElement, wire, api, track } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import SLA_FIELD from '@salesforce/schema/Account.SLA__c';
import UPSELL_FIELD from '@salesforce/schema/Account.UpsellOpportunity__c';

export default class Poc extends LightningElement {
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accountInfo;

    @track slaOptions;
    @track upsellOptions;

    @wire(getPicklistValues, { recordTypeId: '$accountInfo.data.defaultRecordTypeId', fieldApiName: SLA_FIELD })
    slaFieldInfo({ data, error }) {
        if (data) this.slaFieldData = data;
    }

    @wire(getPicklistValues, { recordTypeId: '$accountInfo.data.defaultRecordTypeId', fieldApiName: UPSELL_FIELD })
    upsellFieldInfo({ data, error }) {
        if (data) this.upsellOptions = data.values;
    }

    handleUpsellChange(event) {
        let key = this.slaFieldData.controllerValues[event.target.value];
        this.slaOptions = this.slaFieldData.values.filter(opt => opt.validFor.includes(key));
    }
}