Angular 14报错：无法绑定'ngSelected'，它不是option的已知属性

在Angular响应式表单中，不要通过option标签的选中属性来控制选中状态，因为表单控件（FormControl）会接管整个表单状态的管理。你的问题根源在于用错了控制方式，以下是正确的实现步骤：

1. 移除无效的选中属性绑定 #

首先删除模板中option上的[ngSelected]或[selected]属性，这些在响应式表单中要么无效，要么会被表单控件覆盖：

<select class="form-select" formControlName="role">
    <option *ngFor="let r of roles" [value]="r.id">{{r.name}}</option>
</select>

注意：模板中无需this.roles，直接写roles即可，模板上下文默认指向组件实例。

2. 通过FormControl设置默认选中值 #

在组件类中，通过FormControl的setValue或patchValue方法设置默认选中的角色ID，这是响应式表单的标准做法：

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

export class YourComponent implements OnInit {
  roles = [/* 你的角色数据，示例：{id: 2, name: "编辑"}, {id: 3, name: "访客"} */];
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单
    this.form = this.fb.group({
      role: [''] // 初始值可设为默认选中的角色ID
    });
  }

  ngOnInit(): void {
    // 假设你要默认选中id为2的角色
    this.setDefaultSelectedRole(2);
  }

  setDefaultSelectedRole(roleId: number): void {
    this.form.get('role')?.setValue(roleId);
  }
}

为什么之前的方法无效？ #

• ngSelected不是Angular的内置指令，所以会触发“无法绑定到'ngSelected'，因为它不是'option'的已知属性”的错误。
• 原生[selected]属性在响应式表单中会被FormControl的状态覆盖，因为表单控件会优先管理选中状态，手动设置的selected不会生效。

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