Custom Component in qml - qt

Question

I am Using custom inputRow and MenuButton is placed Outside component when i try to print value of Val1 and Val2 it gives "ReferenceError: val1 is not defined",
how can i access it Outside component.
InputRow {
name:"Command"
enabled: true
filename: "qrc:/AutonomyPlatform/Images/Parameters.svg"
component: Column {
spacing: 10
Row{
spacing: 50
Text {
text: "Val1"
color: Colors.menuBodyTextNormal
font.pointSize: 10
}
TextInput {
id:val1
width: 5
text: selectedModel ? "0" : ""
font.pointSize: 10
color: Colors.menuBodyTextInput
}
Text {
text: "m"
color: Colors.menuBodyTextNormal
font.pointSize: 10
}
}
Row {
spacing: 50
Text{
text: "Val2"
color: Colors.menuBodyTextNormal
font.pointSize: 10
}
TextInput {
id:val2
width: 5
text: selectedModel ? "0" : ""
font.pointSize: 10
color: Colors.menuBodyTextInput
}
Text {
text: "m"
color: Colors.menuBodyTextNormal
font.pointSize: 10
}
}
} //End of Column
MenuButton {
label: "Send"
buttonHeight: 25
buttonWidth: 35
onMenuButtonClicked:
{
console.log("VAL1",val1.text) //ReferenceError: val1 is not defined,
console.log("VAL2",val2.text)
console.log("SEND")
}
}
}
When i put Menubutton inside column component it prints as expected but when its outside component i get ReferenceError as mentioned above

Answer 1

As I mentioned above that could be done in a declarative style:
For example:
Window {
id: window
visible: true
width: 400
height: 600
title: qsTr("Test")
property string str1: ""
property string str2: ""
onStr1Changed: printOut();
onStr2Changed: printOut();
function printOut()
{
console.log(str1, str2);
}
ColumnLayout {
anchors.centerIn: parent
Loader {
id: loader1
sourceComponent: TextInput {
id: txt1
text: "xxx"
Binding {
target: window
property: "str1"
value: txt1.text
}
}
}
Loader {
id: loader2
sourceComponent: TextInput {
id: txt2
text: "xxx"
Binding {
target: window
property: "str2"
value: txt2.text
}
}
}
}
Component.onCompleted: {
loader1.active = true;
loader2.active = true;
}
}

Answer 2

Got a way to access this :
InputRow{
id: userForm
property var userInput1
property var userInput2
component :
Column{
...
TextInput {
id:val1
text: "777"
onTextChanged: userForm.userInput1 = text
Component.onCompleted : userForm.userInput1 = text
}
}
MenuButton{
onClicked : console.log(userForm.userInput1)
}