当选项列表更改时，用于选择的表单控件不会更新值

Question

我正在使用Angular的Reactive表单，并且Form控件之一是select输入。选项会动态更改，并且当用户选择一个值然后选项更改时，即使值不再出现在选项列表中（因此也不是可接受的值），旧值仍然是Form Control的值。] >

HTML：

<mat-select formControlName="example">
    <mat-option *ngFor="let example of examples_filtered" [value]="example">
        {{ example.frontend_name }}
    </mat-option>
</mat-select>
TypeScript：

this.myForm.controls['someControl'].valueChanges.subscribe(
    (value) => {
        this.examples_filtered = [];
        this.examples.forEach((example: Example, index: Number, array: Example[]) => {
          if (example.value_id === value.id) {
            this.examples_filtered.push(example);
          }
        });
    }
);
由于此表单控件使用Validators.required，所以预期的行为是表单控件被清空（即，该值设置为null），并且其状态更改为'INVALID'。 

实际结果是，先前过滤的示例中的旧值仍在表单控件中选择，并且Validators.required将表单控件标记为有效。

我应该手动执行此操作（即自定义代码）还是Angular支持的机制来解决此问题？

我正在使用Angular的Reactive表单，并且Form控件之一是select输入。选项动态更改，当用户选择一个值然后选项更改时，旧值是...

Answer 1

以下将根据需要工作。关键是要使用Angular的selectionChange事件，该事件将按预期直接更新表单控件（在输入附加事件处理程序之前）。