Angular中如何将下拉选项值绑定到输入框及响应式表单

你的核心问题是没利用Angular响应式表单的自动同步能力，反而用手动DOM操作和中间变量，导致值没正确同步到表单。以下是修正后的代码：

组件代码（main.ts） #

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: 'main.html',
})
export class App {
  name = 'Angular';
  
  taxonomyResponse: any = {
    categoryList: [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3' },
    ],
  };

  selectForm = this.fb.group({
    selectOption: [''] // 初始化空值
  })

  constructor(private fb: FormBuilder) {}

  submit() {
    console.log(this.selectForm.value);
  }
}

bootstrapApplication(App);

HTML代码（main.html） #

<form [formGroup]="selectForm" (ngSubmit)="submit()">
  <select id="dropdown" class="form-select" formControlName="selectOption">
    <option value="">Please Select Option</option>
    <option *ngFor="let t of taxonomyResponse.categoryList" [value]="t.name">
      {{t.name}}
    </option>
  </select>
  <input type="text" formControlName="selectOption" />
  <button type="submit" id="submit">Submit</button>
</form>

关键修改点说明 #

• 移除@ViewChild、optionChoice变量和onChange方法，无需手动操作DOM获取值
• 给<select>添加formControlName="selectOption"，和输入框绑定同一个表单控件，Angular会自动同步两者的值
• 给默认选项设置value=""，确保未选择时表单值为空
• 给循环生成的选项添加[value]="t.name"，明确传递选中值到表单控件
• 移除输入框的value="{{optionChoice}}"，formControlName会自动绑定并同步表单值

修改后，选中下拉选项时输入框会自动填充对应值，表单的selectOption属性也同步更新，提交时能拿到正确的选中值。

内容的提问来源于stack exchange，提问作者fearless924