AngularJS未使用ngModel时，<select>的<option>绑定变量后selected属性失效问题

这个问题我之前做Angular响应式表单时也碰到过，核心原因是你混淆了原生HTML的selected属性和Angular响应式表单的控制逻辑——响应式表单里，下拉框的选中状态是由对应的FormControl的值决定的，标签上的selected属性会被表单控件的值覆盖，尤其是当你给<option>使用动态值时，这个优先级会更明显。

直接解决方案 #

要让第一个选项默认选中，你需要在初始化表单的FormGroup时，给status这个FormControl设置初始值为空字符串（""），和第一个<option>的value完全匹配：

1. 组件类中初始化表单时设置初始值

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

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent {
  yourForm: FormGroup;

  // 假设你的variable1/variable2/variable3已经在组件中定义
  variable1 = 'value1';
  variable2 = 'value2';
  variable3 = 'value3';

  constructor(private fb: FormBuilder) {
    // 初始化表单，给status控件设置初始值为""
    this.yourForm = this.fb.group({
      status: ['', Validators.required] // 这里的空字符串对应第一个option的value
    });
  }
}

2. 模板代码优化（推荐）

保留第一个<option>的value=""，同时把动态选项的value="{{variable}}"改成Angular的属性绑定语法[value]="variable"——这是Angular处理动态属性的标准方式，比字符串插值更可靠，能避免潜在的解析问题：

<select class="form-control" id="status" formControlName="status">
  <option value="" selected>-- Placeholder --</option>
  <option [value]="variable1">Text 1</option>
  <option [value]="variable2">Text 2</option>
  <option [value]="variable3">Text 3</option>
</select>

为什么原来的方法无效？ #

当你使用formControlName绑定响应式表单时，Angular会完全接管下拉框的选中状态：

• 如果FormControl的初始值是undefined或null（默认情况），Angular找不到匹配的<option>（因为后面的选项有动态值，第一个选项的value是""），就会显示空的下拉框，即使你给第一个选项加了selected也没用。
• 只有当FormControl的值和某个<option>的value完全匹配时，该选项才会被选中。

额外排查点 #

• 可以在组件初始化后打印console.log(this.yourForm.get('status')?.value)，确认初始值确实是空字符串，而不是undefined。
• 如果你的variable1/variable2/variable3是异步加载的（比如从API获取），不用担心——只要FormControl的初始值是""，下拉框依然会默认选中第一个选项，后续变量加载完成后也不会影响默认选中状态，除非你主动修改FormControl的值。

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