Angular中MatSelect值在@Input更新后未同步变更问题求助

问题核心原因 #

1. 同时使用formControlName和[(ngModel)]属于冗余绑定，两者在响应式表单中混用会导致状态同步冲突。
2. filtersForm初始化时仅给quotes控件赋值一次初始的quoteStatuses，父组件传入的quoteStatuses变化后，FormControl的值不会自动同步。

具体解决步骤 #

1. 移除冗余的ngModel绑定

保留响应式表单的formControlName即可，删除mat-select上的[(ngModel)]="quoteStatuses"：

<ng-container *ngIf="quoteStatuses">
  <mat-form-field appearance="outline">
    <mat-label>Quote Statuses</mat-label>
    <mat-select
      formControlName="quotes"
      multiple
    >
      <mat-option
        *ngFor="let defaultQuoteStatus of defaultQuoteStatuses"
        [value]="defaultQuoteStatus"
        >{{ defaultQuoteStatus }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-container>

2. 监听@Input变化同步FormControl值

实现OnChanges钩子，监听quoteStatuses的变化并更新表单控件：

import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnChanges, OnInit {
  @Input() quoteStatuses!: string[] | null;

  @Output() confirmFilters = new EventEmitter();
  @Output() resetForms = new EventEmitter();

  defaultQuoteStatuses: string[] = [
    'inProgress',
    'pending',
    'approved',
    'accepted',
    'rejected',
    'cancelled',
  ];

  filtersForm = new FormGroup({
    quotes: new FormControl([]),
  });

  // 初始化时同步初始值
  ngOnInit(): void {
    if (this.quoteStatuses) {
      this.filtersForm.get('quotes')?.setValue(this.quoteStatuses);
    }
  }

  // 监听Input值变化同步表单
  ngOnChanges(changes: SimpleChanges): void {
    const statusChange = changes['quoteStatuses'];
    if (statusChange && statusChange.currentValue !== statusChange.previousValue) {
      this.filtersForm.get('quotes')?.setValue(statusChange.currentValue);
    }
  }
}

说明 #

通过ngOnChanges钩子监听父组件传入值的变化，主动更新FormControl的状态，mat-select会自动响应表单控件的变更刷新显示。同时遵循Angular响应式表单的最佳实践，避免混合使用模板驱动表单的ngModel和响应式表单的formControlName。

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