Angular 5获取formControlName中select选项的文本

Angular 5是一种流行的前端开发框架，用于构建Web应用程序。在Angular中，formControlName用于绑定表单控件的值。如果formControlName绑定到一个select元素，我们可以通过以下方式获取选项的文本：

首先，确保在组件类中引入FormControl和FormGroup模块：

import { FormControl, FormGroup } from '@angular/forms';

在组件类中创建一个FormGroup对象，并在其中定义一个FormControl对象来表示select控件：

myForm: FormGroup;
selectControl: FormControl;

在组件的构造函数中初始化FormGroup和FormControl：

constructor() {
  this.selectControl = new FormControl();
  this.myForm = new FormGroup({
    select: this.selectControl
  });
}

在HTML模板中，使用formControlName指令将select元素与FormControl关联起来，并添加一个change事件监听器：

<form [formGroup]="myForm">
  <select formControlName="select" (change)="getSelectedOptionText()">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</form>

在组件类中，实现getSelectedOptionText方法来获取选项的文本：

getSelectedOptionText() {
  const selectedValue = this.selectControl.value;
  const selectedOption = Array.from(document.querySelectorAll('select option'))
    .find(option => option.value === selectedValue);
  const selectedOptionText = selectedOption ? selectedOption.textContent : '';
  console.log(selectedOptionText);
}

上述代码中，我们首先获取select控件的值，然后使用querySelectorAll方法获取所有option元素，通过遍历找到与选中值匹配的option元素，最后获取该option元素的textContent属性即为选项的文本。

在腾讯云的产品中，与Angular 5相关的推荐产品是腾讯云云服务器（CVM）。腾讯云云服务器是一种可扩展、高性能、安全可靠的云计算基础设施，可用于托管Web应用程序。您可以通过以下链接了解更多关于腾讯云云服务器的信息：

腾讯云云服务器产品介绍