Unable to get force:inputField or force:outputField to render inside other markup in Lightning Component when used in Lightning Experience
I just heard from Farhan Tahir, the product manager for Aura. He's confirmed that it is in fact a bug (W-3342864).
UPDATE: the bug's been nevered. PM guidance is to "use lightning namespaced components. force:inputField
should be replaced with lightning:inputField
(or even better with lightning-input-field
, which is the LWC version)."
As of Summer 17, here's the work around we're using:
<!-- component setup -->
<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
<aura:attribute name="newContractLine" type="Contract_Line__c" default="{'sobjectType': 'Contract_Line__c'}" />
<!-- end component setup -->
<!-- workaround for form fields below -->
<force:outputField aura:id="contractType" value="{!v.newContractLine.Type__c}" class="slds-hidden" />
<!-- end workaround -->
<!-- contract line form -->
<lightning:layout horizontalAlign="spread" multipleRows="true">
<!-- type -->
<lightning:layoutItem size="6" class="slds-p-horizontal--small">
<ui:outputText class="slds-form-element--label" value="Type"/>
<force:inputField aura:id="typeInput" value="{!v.newContractLine.Type__c}"/>
</lightning:layoutItem>
<!-- end type -->
</lightning:layout>
<!-- end contract line form -->