lightning:outputField rendering issue when using with lightning:recordViewForm

Background:

lightning:outputField is the recommended tag for lightning:recordViewForm to display field value of the record.

<lightning:recordViewForm recordId="001XXXXXXXXXXXXXXX" objectApiName="Contact">
    <div class="slds-box slds-theme_default">
        <lightning:outputField fieldName="Name" />
        <lightning:outputField fieldName="Phone"/>
        <lightning:outputField fieldName="Email" />
        <lightning:outputField fieldName="Birthdate" />
        <lightning:outputField fieldName="LeadSource" />
    </div>
</lightning:recordViewForm>

Problem: It gives an error if we populate the data conditionally using aura:if tag.

 <aura:if isTrue="{!v.editMode}">
        <lightning:recordEditForm recordId="{!v.sourceRecordFields.AccountId}" onsuccess="{!c.handleAccountSaved}" objectApiName="Account">
            <lightning:messages />
            <lightning:inputField fieldName="Name" />
            <lightning:inputField fieldName="Phone" />
            <lightning:inputField fieldName="Rating" />
            <lightning:inputField fieldName="Description" />
            <lightning:button variant="brand" type="submit" name="save" label="Save" class="slds-m-top_medium"/>
        </lightning:recordEditForm>
        <aura:set attribute="else">
        <lightning:recordViewForm recordId="{!v.sourceRecordFields.AccountId}" objectApiName="Account">
            <lightning:outputField fieldName="Name" />
            <lightning:outputField fieldName="Phone" />
            <lightning:outputField fieldName="Rating" />
            <lightning:outputField fieldName="Description" />
            <lightning:button variant="brand" onclick="{!c.editAccount}" name="edit" label="Edit" class="slds-m-top_medium"/>
        </lightning:recordViewForm>
     </aura:set>
</aura:if>

Cannot read property ‘querySelectorAll’ of null

Solution: We will use separate lightning:recordEditForm components for editing and viewing the record. And, we will use javascript and CSS to show and hide conditionally.

{Component}.cmp:

<div id="editableDiv" style="display:none;">
   <lightning:recordEditForm recordId="{!v.sourceRecordFields.AccountId}" onsuccess="{!c.handleAccountSaved}" objectApiName="Account">
      <lightning:messages />
      <lightning:inputField fieldName="Name" />
      <lightning:inputField fieldName="Phone" />
      <lightning:inputField fieldName="Rating" />
      <lightning:inputField fieldName="Description" />
      <lightning:button variant="brand" type="submit" name="save" label="Save" class="slds-m-top_medium"/>
   </lightning:recordEditForm>
</div>
<div id="viewableDiv" style="display:block">
   <lightning:recordViewForm recordId="{!v.sourceRecordFields.AccountId}" objectApiName="Account">
      <lightning:outputField fieldName="Name" />
      <lightning:outputField fieldName="Phone" />
      <lightning:outputField fieldName="Rating" />
      <lightning:outputField fieldName="Description" />
      <lightning:button variant="brand" onclick="{!c.editAccount}" name="edit" label="Edit" class="slds-m-top_medium"/>
   </lightning:recordViewForm>
</div>

{ComponentController}.js:

({
   editAccount:function(cmp, event, helper){
     helper.showEditableDiv(cmp);
   },

   handleAccountSaved: function(cmp, event, helper) {
     helper.hideEditableDiv(cmp);
   }
})

{ComponentHelper}.js:

({
   showEditableDiv : function(cmp) {
     var elementEdit = document.getElementById('editableDiv');
     elementEdit.style.display = 'block';
     var elementView = document.getElementById('viewableDiv');
     elementView.style.display = 'none';
   },
   
   hideEditableDiv : function(cmp) {
     var elementEdit= document.getElementById('editableDiv');
     elementEdit.style.display = 'none';
     var elementView = document.getElementById('viewableDiv');
     elementView.style.display = 'block';
   }
})

PS: This is a temporary solution and can be used until Salesforce delivers a fix for it.

Happy coding!!