Dynamic form

Input.qml

import QtQuick 2.0
import QtQuick.Controls 2.12

Item {
    id: input
    property string type: ""
    property string text: ""
    property string name: ""
    property alias radio: radio

    function value() {
        if (input.type == "text")       return textField.text
        if (input.type == "number")     return number.text
        if (input.type == "checkbox")   return checkbox.checked
        if (input.type == "radio")      return radio.checked
        return null;
    }

    Label {
        visible: input.type == ""
        text: "Invalid type: " + input.type
    }

    TextField {
        id: textField
        anchors.fill: parent
        visible: input.type == "text"
        placeholderText: input.text
    }
    CheckBox {
        id: checkbox
        anchors.fill: parent
        visible: input.type == "checkbox"
        text: input.text
    }
    RadioButton {
        id: radio
        anchors.fill: parent
        visible: input.type == "radio"
        text: input.text
    }
    TextField {
        id: number
        anchors.fill: parent
        visible: input.type == "number"
        placeholderText: input.text
        validator: IntValidator {}
    }
}

main.qml

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    function refreshValues() {
        var s = "Result:<br />";
        for (var i = 0; i < repeater.count; ++i) {
            var item = repeater.itemAt(i)
            s += item.text + "=" + item.value() + "<br />";
        }
        resultText.text = s;
    }

    function addRadios(name, group) {
        var ret = [];
        for (var i = 0; i < repeater.count; ++i) {
            var item = repeater.itemAt(i)
            if (item.name === name) {
                ret.push(item)
                group.addButton(item.radio)
            }
        }
        console.log(ret.length)
        return ret;
    }

    Component.onCompleted: {
        addRadios("sex", buttonGroupSex)
    }

    ButtonGroup {
        id: buttonGroupSex
    }

    ListModel {
        id: inputModel
        ListElement {
            name: "name"
            type: "text"
            text: "Name"
        }
        ListElement {
            name: "last_nae"
            type: "text"
            text: "Last name"
        }
        ListElement {
            name: "married"
            type: "checkbox"
            text: "Married"
        }
        ListElement {
            name: "age"
            type: "number"
            text: "Age"
        }
        ListElement {
            name: "sex"
            type: "radio"
            text: "Male"
        }
        ListElement {
            name: "sex"
            type: "radio"
            text: "Female"
        }
    }

    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("Form")
        }
        TabButton {
            text: qsTr("Result")
        }
    }
    StackLayout {
        id: view
        anchors.right: parent.right
        anchors.rightMargin: 30
        anchors.left: parent.left
        anchors.leftMargin: 30
        anchors.topMargin: bar.height + 30
        anchors.top: parent.top
        currentIndex: bar.currentIndex

        ColumnLayout {
            Repeater {
                id: repeater
                model: inputModel
                Input {
                    type: model.type
                    text: model.text
                    name: model.name
                    Layout.fillWidth: true
                    Layout.preferredHeight: 40
                }
            }
            Item {
                Layout.fillHeight: true
            }
        }
        ColumnLayout {
            Button {
                text: "Refresh values"
                onClicked: refreshValues()
            }
            TextArea {
                id: resultText
                textFormat: Text.RichText
                Layout.fillWidth: true
                Layout.fillHeight: true
                readOnly: true
            }
        }
    }

}