I am facing issues with using both Lightning-input and lightning-input-field. Some of my requirements are satisfied with Lightning-input and some with lightning-input-field.Here are issues faced.

Issue when using lightning-input: Since I am handling the data my self, I am getting errors while displaying multiselect picklist fields. So my team mate suggested using lightning-input-field and salesforce will handle displaying and saving data.

Issue when using lightning-input-field: I have to do some custom validations(make some fields required based on other fields input) and it is causing issues. Also I need the form to be in view mode and then edit mode on click of edit button. When i give mode as read only, these fields are not showing up.

I am not able to decide what to use. Please help me with it.

Here is my code : html

    <lightning-record-edit-form record-id={recordId} object-api-name={objectApiName} onsuccess={handleSuccess}>
        <template for:each={fieldList} for:item="field">
            <div key={field} class="slds-grid" if:false={showEditField}>
                <div class="slds-col slds-size_11-of-12">
                    <lightning-output-field field-name={field}>
                <div class="slds-col slds-size_1-of-12">
                    <lightning-button-icon icon-name="utility:edit" onclick={handleEdit}>
            <div key={field} class="slds-grid" if:true={showEditField}>
                <div class="slds-col slds-size_1-of-1">
                    <lightning-input-field field-name={field}>
        <lightning-button type="submit" name="submit" label="Save">


import { LightningElement, api } from 'lwc';
export default class ChildRunway extends LightningElement {
    @api fieldList = ["Name", "Id", "somefield1", "somefield2"]; //harcoded the values assuming objectApiName is Account for demo purpose
    @api recordId;
    @api objectApiName;
    handleSuccess(event) {
        this.showEditField = false;
    handleEdit() {
        this.showEditField = !this.showEditField;

I have an apex class that gets me the record Id needed for this ChildRunway and that is being sent from Parent LWC.

Html of parent:

<c-child-runway record-id={recordId} object-api-name="Transaction"></c-child-runway>

So the validations I need to do are:

  1. Some fields are required fields and it is not showing as required in the UI
  2. Somefield1 is a picklist and when one of the values is selected, somefield2 should be shown as required field.
  3. Somefiled2 should be validated as 10 digit number (I tried adding a validation rule on that field and it was always expecting this field to have 10 digit number. Since it is not a required field for some options, that will not help me)
  • As you've currently described them, all of your requirements are possible with a lightning-input-field (and perhaps a lighting-output-field). Could you perhaps add some code so we get a sense of what you've tried and where it is you're stuck?
    – Kasper
    Feb 17 at 0:24
  • @Kasper I added more details and code in my question now. Thanks.
    – CodeGirl
    Feb 17 at 15:03
  • About point 1, when you say a required field is not showing as required, do you mean that the field settings in setup aren't respected? Or did you set the required attribute on the lightning input field tag?
    – Kasper
    Feb 21 at 0:18
  • For point two you could use a javascript method to decide when a field is required. The required tag on a lightning-input-field can be linked to a javascript getter for that. You can do point three either while people type or before they click save by using the change handler or the submit handler methods.
    – Kasper
    Feb 21 at 0:19


You must log in to answer this question.