ListModel error in ComboBox delegate

[gabor53]

Hi,
I have the following AddMedPage.qml file:

import QtQuick 2.11
import Felgo 3.0
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.12
import QtQuick.Layouts 1.3
import "JSCode.js" as JS
import QtQuick.Controls 2.4 as QQC2

Page {
    title: "Add Medications"

    Rectangle {
        id: backgrnd
        anchors.fill: parent
        color: "#C1F4F1"

        Text {
            id: name
            text: "Patient:"
            anchors.left: backgrnd.left
            anchors.leftMargin: dp(15)
            anchors.top: backgrnd.top
            anchors.topMargin: dp(20)
            font.bold: true
            font.pointSize: 16
            focus: false
            color: "#003a8b"
        }

        QQC2.ComboBox {
            id: myCombo
            width: backgrnd.width / 2
            height: dp(30)
            anchors.left: name.right
            anchors.leftMargin: dp(10)
            anchors.verticalCenter: name.verticalCenter
            editable: true

            QQC2.ToolTip.visible: hovered
            QQC2.ToolTip.text: qsTr("Press Enter when done.")
            QQC2.ToolTip.timeout: 3000

            textRole: "patient"

            currentIndex: 0

            model: ListModel {
                id: listModel
            }

            delegate: QQC2.ItemDelegate {
                width: myCombo.width
                height: myCombo.height

                //Defines the items in the dropdown list.
                Text {
                    id: txt
                    padding: dp(15)
                    text: listModel.patient
                    font.pixelSize: dp(18)
                    color: "#8778F8"
                    anchors.verticalCenter: parent.verticalCenter
                }
                onClicked: myCombo.currentIndex = index

                highlighted: myCombo.highlightedIndex === index
            }

            contentItem: TextInput {
                id: myInput
                font.pixelSize: 18

                //If hovered text clear otherwise hint displayed.
                text: myCombo.hovered ? "" : myCombo.displayText
                //                color: myCombo.pressed ? ST.comboPressed1() : ST.comboPressed2()
                verticalAlignment: Text.AlignVCenter
                font.capitalization: Font.Capitalize
                layer.enabled: true
            }

            //Black X in the TextInput box
            Image {
                id: deleteText
                source: "file:///Programming/Android/Repository/DropdownDbFelgo/qml/remove.png"
                width: myInput.height / 3
                height: myInput.height / 3
                anchors.verticalCenter: myInput.verticalCenter
                anchors.right: myInput.right
            }

            //MouseArea above deleteText.
            MouseArea {
                id: deleteMouse
                anchors.fill: deleteText
                onClicked: {
                    myInput.clear()
                }
            }

            background: Rectangle {
                id: rect
                implicitWidth: backgrnd.width / 2
                implicitHeight: myCombo.height
                color: "#C7F6DF"

                border.width: myCombo.visualFocus ? 2 : 1
                radius: 15
            }

            onAccepted: {
                console.log("Entered onAccepted. CurrentIndex: " + currentIndex)

                if (find(editText) === -1) {
                    listModel.append({
                                         "what": editText
                                     })

                    console.log("editText: " + editText)

                    var newItem = editText
                    console.log("newItem: ", newItem)

                    JS.dbInsertPatients(newItem)
                }
            }

            Component.onCompleted: {
                //                JS.dbInit()
                JS.dbGetPatientList()
            }
        }
    }
}

JSCode.js:

//Creating or opening the database
function dbInit() {
    var db = LocalStorage.openDatabaseSync("Medciations", "",
                                           "Storing Medications", 1000000)
    try {
        db.transaction(function (tx) {
            tx.executeSql(
                        'CREATE TABLE IF NOT EXISTS PatientsTable (patient TEXT)')
        })
    } catch (err6) {
        console.log("Error creating Patients table in database: " + err6)
    }
    ;
}

//Opening db
function dbGetHandle() {
    dbInit()
    try {
        var db = LocalStorage.openDatabaseSync("Medciations", "",
                                               "Storing Medications", 1000000)
    } catch (err4) {
        console.log("Error opening database: " + err4)
    }
    return db
}

//Insert data into the PatientsTable  in the db
function dbInsertPatients(newItem) {

    console.log("newItem in Code.js: ", newItem)
    console.log("Patient currentText in Code.js: ", newItem)
    var db = dbGetHandle()
    if (newItem !== "") {
        db.transaction(function (tx) {
            tx.executeSql('INSERT OR IGNORE INTO PatientsTable  VALUES (?)',
                          [newItem])
        })
    }
}

function dbGetPatientList() {
    dbInit()
    var db = dbGetHandle()
    db.transaction(function (tx) {
        var results = tx.executeSql(
                    'SELECT patient FROM PatientsTable order by patient desc')
        for (var i = 0; i < results.rows.length; i++) {
            //            console.log("Patient: ",results)
            listModel.append({
                                 "patient": results.rows.item(i).patient,
                                 "checked": ""
                             })
        }
    })
}

When I run it keeps giving me the following error message on the

text: listModel.patient

line:
*** Unable to assign [undefined] to QString**
How can I fix this error? Thank you for your help.