Angular响应式表单select绑定@Input选项默认选中失效如何解决

你写的[selected]="i===0"逻辑之所以完全不生效，根本原因是绑了formControlName的select是受控表单组件，选中状态完全由对应的FormControl值掌控。
Angular Reactive Forms的内部逻辑会在初始化select时，直接接管所有选中态设置，写在option上的原生selected属性绑定会被直接覆盖，根本轮不到它生效。而你的productTypeFormControl初始值是null，和任何option的值都匹配不上，所以select打开就是空白状态。

方法一：用FormControl直接设置默认选中值（最推荐，符合Angular表单规范） #

完全不需要在option上写selected绑定逻辑，只要保证productType这个FormControl的初始值，和第一个option的匹配值一致即可：

• 首先明确option的可匹配值：按照原生HTML规则，如果你的option没写[value]绑定，可匹配值就是你模板里插值渲染的文本内容，也就是当前代码里的option.name；如果写了类似[value]="option.id"的绑定，可匹配值就是对应的id值。
• 等optionsArray拿到有效内容（数组不为空）之后，给FormControl设置默认值，参考代码：

  // 监听options输入的变化，等父组件传入的options数据到位再设置默认值
  ngOnChanges(changes: SimpleChanges) {
    if (changes['options'] && this.optionsArray.length > 0) {
      // 给productType表单项赋值为第一个选项的对应值
      this.productTypeControl.setValue(this.optionsArray[0].name);
    }
  }
  

  注意：如果你的options是父组件通过异步接口传入的，千万不要在组件构造/表单初始化阶段就直接取optionsArray[0]设值，这时候数组还为空，取不到有效内容。

方法二：临时兜底方案 #

如果暂时不想调整FormControl逻辑，可直接在select标签上绑定和第一个option匹配的初始值，跳过Angular表单的初始选中覆盖逻辑，但这种方式长期使用容易出现状态不一致的问题，更推荐用第一种统一受控状态的思路。

• 只要select上绑了formControlName或ngModel，就不要在单独的option上写[selected]绑定，这类写法在受控表单组件中100%会被表单逻辑覆盖，完全无效。
• 给FormControl赋值时，值的类型、内容必须和option上绑定的value完全一致，哪怕两边字符串差个空格都可能出现匹配失败、显示空白的问题。

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