Copy content to new content by using button - sapui5

Question

I'm using SAPUI5 XML view
myView.view.xml
<f:SimpleForm id="form1"/>
<f:content id="content1">
<core:Title text="" />
<m:Label text="Label A" />
<m:Input value="10/5/2548" enabled="false" />
<m:Label text="ชั้นที่/ปีที่" />
<m:Input value="1" />
<core:Title text="" />
<m:Label text="Label B" />
<m:Input value="3.25" />
<core:Title text="" />
</f:content>
</f:SimpleForm>
myController.controller.js
addNewContent:function(){
var content = this.getView().byId("form1").getContent();
this.getView().byId("form1").addContent(content);
}
Error message
not valid for aggregation "content" of Element
sap.ui.layout.form.SimpleForm#__xmlview1--form1
I want to copy content (id="content1") to button when click addNewContent Button
Anyone help thanks
Add more information
this is what i want to do

Answer 1

Technically
The getContent() method returns an array sap.ui.core.Element[].
The addContent() method takes a single sap.ui.core.Element as parameter.
So you need to do something like this:
this.getView().byId("form1").addContent(content[0]);
or this:
oForm = this.getView().byId("form1");
content.forEach(oControl => oForm.addContent(oControl))
or if not using ES6:
oForm = this.getView().byId("form1");
for (var i = 0; i < content.length; i++) {
oForm.addContent(content[i]);
}
Functionally
It is not clear to me what you are trying to achieve. Based on your code snippet, you are trying to copy from and paste to the same place...

Answer 2

Hope this will help you, try to clone form and append it to the container.
XML view
<Button text="+" press="cloneContent" /><!-- Button for cloning -->
<f:SimpleForm id="form1" editable="false" layout="ResponsiveGridLayout" title="Address" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<core:Title text="" />
<Label text="Label A" />
<Input value="10/5/2548" enabled="false" />
<Label text="ชั้นที่/ปีที่" />
<Input value="1" />
<core:Title text="" />
<Label text="Label B" />
<Input value="3.25" />
<core:Title text="" />
</f:content>
</f:SimpleForm>
<VBox id="contentHolder"></VBox><!-- clone form holder -->
Controller
cloneContent: function(oEvent){
var oForm = this.getView().byId("form1");
if (oForm) {
oFormClone = oForm.clone();
oFormClone.setTitle("");
var oHolder = this.getView().byId("contentHolder");
if (oHolder) {
//oHolder.removeAllItems();//if you want to remove all the previous added item you can uncomment this line
oHolder.addItem(oFormClone);
}
}
}
Note: Take care of binding after clone. You can use oHolder to rebind if you have any issue.