2

I am trying to create dynamic input fields on button click for contact fields using $A.createComponent.

From the examples I find online I am able to create <ui:inputText/> components but when I use <force:inputField/> I am getting error in browser console.

DemoComp.cmp

<aura:component >
    <aura:attribute name="contact" type="Contact" default="{ 'sobjectType': 'Contact', 'LastName': 'Satapathy' }"/>
    <force:inputField aura:id="contactName" value="{!v.contact.AccountId}"/>
    <lightning:button label="Adjust Width" onclick="{!c.editField}"/> 
    <div aura:id="fieldPopup"></div>
</aura:component>

Working code for <ui:inputText>

({
    editField: function(component,event,helper) {

        var contact = component.get("v.contact");
        $A.createComponent(
            "ui:inputText",
            {
                "aura:id" : "123",
                "value": "hello world"
            },
            function(newButton, status, errorMessage){
                //Add the new button to the body array
                if (status === "SUCCESS") {
                    var popup = component.find("fieldPopup");
                    var body = popup.get("v.body");
                    body.push(newButton);
                    popup.set("v.body", body);
                }
                else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.");
                }
                else if (status === "ERROR") {
                    console.log("Error: " + errorMessage);
                }
            }
        );
    }
})

Failing <force:inputField>

({
    editField: function(component,event,helper) {
        var contact = component.get("v.contact");
        $A.createComponent(
            "force:inputField",
            {
                "aura:id" : "123",
                "value": contact.AccountId
            },
            function(newButton, status, errorMessage){
                //Add the new button to the body array
                if (status === "SUCCESS") {
                    var popup = component.find("fieldPopup");
                    var body = popup.get("v.body");
                    body.push(newButton);
                    popup.set("v.body", body);
                }
                else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.");
                }
                else if (status === "ERROR") {
                    console.log("Error: " + errorMessage);
                }
            }
        );
    }
})
  • 2
    This has been a longstanding issue with force:inputField. At this point I find that component completely unusable because it has so many issues. – dsharrison Jun 16 '17 at 14:17
  • @Praveen I had visited his question and thought he is asking about accessing object attributes the JSON object way (obj[property]) which I believe is still not possible, be it inside force:inputField or ui:inputText. – Saumya Ranjan Satapathy Jun 17 '17 at 7:57
  • @SaumyaRanjanSatapathy Ah you are right!!. I should have also tagged another relevant question when marking it as duplicate. With that said, as @dsharrison pointed out we cannot create force:inputField dynamically. – Praveen Jun 17 '17 at 11:31
  • @SaumyaRanjanSatapathy Please check this answer out. – Praveen Jun 17 '17 at 11:42