Angular中同时用formControlName与ngModel报错，如何替换ngModel？

在Angular响应式表单中，formControlName已经和对应的FormControl完成了双向数据绑定，不需要再额外使用[(ngModel)]——两者混用会触发框架警告，因为Angular无法确定应该优先同步哪一个数据源。

步骤1：修改模板文件（component.html） #

直接删除[(ngModel)]属性，保留formControlName和事件绑定即可：

<mat-select
    formControlName="store"
    (selectionChange)="changestore()"
    multiple>
    <!-- 请保留你原有的<mat-option>列表，确保option的value绑定的是store_id -->
    <mat-option *ngFor="let item of stores" [value]="item.store_id">
        {{ item.store_name }}
    </mat-option>
</mat-select>

步骤2：优化组件逻辑（component.ts） #

不需要依赖ngModel，直接通过FormControl获取选中值即可，同时可以简化代码逻辑：

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

export class YourComponent {
    form: FormGroup;
    storeTechData: any[] = []; // 你的数据源
    stores: any[] = []; // 下拉选项数据源

    constructor(private fb: FormBuilder) {}

    ngOnInit(): void {
        // 初始化响应式表单，给store控件设置空数组作为初始值（适配多选）
        this.form = this.fb.group({
            store: []
        });
    }

    changestore(): void {
        // 直接从FormControl获取当前选中值，用可选链+默认值避免空值报错
        const selectedStoreIds = this.form.get('store')?.value || [];
        
        this.storeTechData.forEach(element => {
            // 简化active状态赋值，直接用includes的布尔返回值
            element.active = selectedStoreIds.includes(element.store_id);
        });
    }
}

进阶优化：改用响应式订阅（推荐） #

如果想更贴合响应式表单的设计理念，可以去掉selectionChange事件，改用valueChanges订阅控件值的变化：

ngOnInit(): void {
    this.form = this.fb.group({
        store: []
    });

    // 订阅store控件的 value 变化，自动触发逻辑
    this.form.get('store')?.valueChanges.subscribe(selectedStoreIds => {
        this.storeTechData.forEach(element => {
            element.active = (selectedStoreIds || []).includes(element.store_id);
        });
    });
}

此时模板中可以删除(selectionChange)="changestore()"，代码更简洁且符合响应式编程思想。

关键说明 #

• formControlName="store"会自动将下拉框的选中值同步到表单form的store字段中，完全替代ngModel的作用。
• 确保下拉选项mat-option的[value]绑定的是store_id（与storeTechData中的字段匹配），这样includes判断才能生效。

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