Html 如何从页面加载下拉列表中获取所选值和文本，并单击angular 8中带有反应形式的按钮

我有一个下拉列表，其数据来自循环。在这里，我需要在加载和单击范围时获取所选值和所选文本。我在这里使用的是被动形式。当我使用值时，所选下拉列表在默认选择时为空。下面是代码

home.component.html 试试这个：

getSelectedVal() {
   console.log("selected value is on click is", this.registerForm.get("title").value);
}

---

UIappDeveloper，分两步完成：

 getSelectedVal(){
   const value=this.registerForm.get('title').value; //get the value
   const status=this.statusdata.find(v=>v.groupid==value) //use "find"
                //status can be null, so I use ternary operator
                //else you are trying to get null.groupname and give you error
   console.log("value=",value,"status=",status?status.groupname:null)

 }

---

感谢您的回答，这里有些问题是页面加载默认选择为空，我需要在页面加载和单击时捕获所选值和文本。我在这里创建了一个演示，一切正常，因为我在app.component.ts文件中硬编码了标题：new FormControl1，但是，如果我从json中删除数组的第一个对象并重新加载页面，这不是正确的方法。如何动态编写呢？

getSelectedVal() {
   console.log("selected value is on click is", this.registerForm.get("title").value);
}

 getSelectedVal(){
   const value=this.registerForm.get('title').value; //get the value
   const status=this.statusdata.find(v=>v.groupid==value) //use "find"
                //status can be null, so I use ternary operator
                //else you are trying to get null.groupname and give you error
   console.log("value=",value,"status=",status?status.groupname:null)

 }