Angular 13 从 Select 选项中获取值和标签

Question

我想获取我的 select 选项的值和标签，并将其映射到我的反应式表单。这是我的 html:

  <select class="form-control" (change)="onChange($event.target)">
    <option value=""></option>
    <option value="C1">Country 1</option>
    <option value="C2">Country 2</option>
    <option value="C3">Country 3</option>
  </select>

这是我的 ts 代码：

  onChange(event: any) {
    // here i want to get the value and label of my selected item (C2 , Country 2 for example)
    console.log(event.value); // this print only the value C1,2,3
  }

Answer 1

更新答案

HTML:

 <select (change)="onChange($event)" formControlName="country"></select>

TS:

  onChange($event: any) {
    let text = $event.target.options[$event.target.options.selectedIndex].text;

    this.yourForm.patchValue({ labelText: text });

    console.log(text);
  }

(change) 应该获取表示选项的文本，formControlName 应该从选项中检索值。

patchValue 会将表单值更改为您想要的值，您只需键入表单控件的名称：labelText 并在 : 之后输入所需的值！

关于选项的值，如果select上有formControlName，它会自动更改formControl值！

Answer 2

在你的component.ts 声明一个变量/集合

options = [
  {value:'some value', label:'some label'}, 
  {value:'some value', label:'some label'}, 
  {value:'some value', label:'some label'}
];
public anothervariableToHoldTheSelectedOption = null;

在component.html文件中

<select class="form-control" [(ngModel)]="anothervariableToHoldTheSelectedOption">
    <option *ngFor="let option of options" value="option">{{option.label}}</option>
  </select>

通过这种方式，您将在 holdingObject 中拥有一个完整的对象。你可以用它做任何事情。

Angular 13 从 Select 选项中获取值和标签

Angular 13 get Value And Label from Select Option

angular

更新答案