sapui5 - Error "Cannot add direct child without default aggregation defined for control ..."

Question

I am getting the error "Cannot add direct child without default aggregation defined for control sap.m.Label". Not sure what this means. Here is my fragment:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.f">
    <ResponsivePopover id="popover" title="{Name}" class="sapUiPopupWithPadding" placement="Bottom">
        <beginButton>
            <Button id="submit" text="{i18n>submit}" press="onSubmit" class="sapUiTinyMargin"/>
        </beginButton>
        <content>
            <f:GridContainer>
                <f:layout>
                    <f:GridContainerSettings rowSize="5rem" columnSize="8rem" gap="1rem"/>
                </f:layout>
                <f:layoutS>
                    <f:GridContainerSettings rowSize="5rem" columnSize="10rem" gap="0.5rem"/>
                </f:layoutS>
                <f:layoutXS>
                    <f:GridContainerSettings rowSize="5rem" columnSize="10rem" gap="0.5rem"/>
                </f:layoutXS>
                <Label text="{i18n>req}" required="true">
                    <f:layoutData>
                        <f:GridContainerItemLayoutData columns="3"/>
                    </f:layoutData>
                </Label>
                <Label id="txt" text="{i18n>cat}" required="true">
                    <f:layoutData>
                        <f:GridContainerItemLayoutData columns="3"/>
                    </f:layoutData>
                </Label>
                <RadioButton id="rbtn1" text="{i18n>grq}">
                    <f:layoutData>
                        <f:GridContainerItemLayoutData columns="4"/>
                    </f:layoutData>
                </RadioButton>
                <RadioButton id="rbtn2" text="{i18n>frq}">
                    <f:layoutData>
                        <f:GridContainerItemLayoutData columns="4"/>
                    </f:layoutData>
                </RadioButton>
                <TextArea id="txtarea" value="" placeholder="{i18n>typeq}" growing="true" growingMaxLines="10" width="100%">
                    <f:layoutData>
                        <f:GridContainerItemLayoutData columns="7"/>
                    </f:layoutData>
                </TextArea>
                <Text text="{i18n>note}">
                    <f:layoutData>
                        <f:GridContainerItemLayoutData columns="7"/>
                    </f:layoutData>
                </Text>
            </f:GridContainer>
        </content>
    </ResponsivePopover>
</core:FragmentDefinition>

Expected result is the fragment will load with out errors.

Answer 1

The sap.m.Label and the other controls cannot be used inside sap.f.Gridcontainer directly. You'll need to place them inside <f:items> first.

From the documentation: https://sapui5.netweaver.ondemand.com/sdk#/api/sap.f.GridContainer%23overview

<f:GridContainer>
  <f:layout>
    <f:GridContainerSettings rowSize="5rem" columnSize="5rem" gap="1rem" />
  </f:layout>
  <f:layoutS>
    <f:GridContainerSettings rowSize="4rem" columnSize="4rem" gap="0.5rem" />
  </f:layoutS>
  <f:items>
    <GenericTile header="Sales Fulfillment">
      <layoutData>
        <f:GridContainerItemLayoutData rows="2" columns="2" />
      </layoutData>
    </GenericTile>
    <w:Card manifest="url-to-manifest">
      <w:layoutData>
        <f:GridContainerItemLayoutData rows="6" columns="3" />
      </w:layoutData>
    </w:Card>
    <Panel>
      <layoutData>
        <f:GridContainerItemLayoutData columns="4" />
      </layoutData>
      <Text text="Sales information" />
    </Panel>
  </f:items>
</f:GridContainer>