Binding lightning:inputField to a client-side SObject instance not an SObject Id?

My reading of the lightning:inputField and related lightning:recordEditForm docs is that the record is read and written based on the Id supplied via the recordId attribute. There is no option to bind to a record that has already been loaded as lightning:input does via its value attribute. This makes lightning:inputField unusable in pure client-side logic where changes in one place are reflected in other places on the screen without round trips to the server.

So it appears that there is still no way to create input fields (or output fields) that are bound to the SObject metadata so saving a lot of tedious programming work (as lightning:inputField is) yet manipulate existing client-side data (as lightning:input does).

Or am I missing something here?

(For me leaving out the recordId as described in the help like this:

To create a record create layout, use this component with
lightning:recordEditForm and pass in the object API name of the record
you’re creating.

results in no fields being displayed.)

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Looks like the value attribute is added now as a part of lightning:inputfield. To create a record here is a below code thats working for me

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome">

<aura:attribute name="companyName" type="String"/>
   <lightning:layout verticalAlign="start" multipleRows="true">
    <lightning:layoutItem flexibility="auto" padding="around-small">
        <lightning:input type="text" label="Campaign" value="{!v.companyName}" aura:id="cmpName" onchange="{!c.handleOnchange}"/>
        <lightning:recordEditForm aura:id="recordEditForm" 
                            objectApiName="Lead" onsuccess="{!c.handleSuccess}" onsubmit="{!c.handleSubmit}" onload="{!c.handleOnload}">
            <lightning:messages />
            <lightning:inputField fieldName="Name" />
            <lightning:inputField fieldName="Company" value="{!v.companyName}" aura:id="company"/>
            <lightning:inputField fieldName="Phone" />
            <lightning:button  variant="brand" class="btn" type="submit" label="Create new lead" />
        </lightning:recordEditForm>
    </lightning:layoutItem>
   </lightning:layout>
</aura:component>

The Controller code for same

({
    handleSuccess : function(component, event, helper) {
      console.log(event.getParams().response);
      for (let key of Object.keys(event.getParams().response)) {
        console.log(key + event.getParams().response[key]);
      }
     console.log(event.getParams().response.id);
},

handleOnchange : function(component, event, helper) {
    component.find("company").set("v.fieldName","Company");
    var company = component.get("v.companyName")
    component.find("company").set("v.value",company);
},

  handleOnload : function(component, event, helper) {
    console.log('Load Event' + JSON.stringify(event.getParams()));
  },
})

Method 2

Spring 18 : Value Attribute in lightning:inputField

Not sure if you are running into same issue. but i have a solution. please do check


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x