在 mat-select selection 改变形式后不改变为 pristine = false

Question

我有一个使用 Angular material mat-select 的表单，我从选项中获取数据并可观察到选项，并通过代码设置 selected 项的值以及。一切正常，但我遇到的问题是我的代码仅在表单不是原始且有效的情况下才允许更新。所以我假设改变 mat-select 框的值会使原始错误，但事实并非如此。

下面是我在模板中使用的代码，是否缺少任何内容，或者我是否必须使用 onChange 事件手动将表单设置为 pristine = false

  <mat-form-field class="col-md-8"  ngDefaultControl label=" " formControlName="parent">
     <mat-label>Parent</mat-label>
        <mat-select [(value)]="menuData.parent">
           <mat-option value="" aria-selected="true" selected> --Select Parent -- </mat-option>
           <mat-option *ngFor="let parent of menuParents$ | async" [value]="parent._id">
            {{ parent.name}}
           </mat-option>
       </mat-select>
  </mat-form-field>

我现在通过使用 selectionChange 事件

解决了这个问题

<mat-select [(value)]="menuData.parent" (selectionChange)="selectionChange($event)">

 selectionChange(e) {
        console.log(e)
        this.form.markAsDirty()
    }

即便如此，我也不确定这是否有效，但确定这是执行此操作的正确方法。我查看了 mat-select 的文档，但找不到任何关于如何执行此操作的信息。

Answer 1

您不应该手动执行此操作。

看来问题是您在 <mat-form-field> 而不是 <mat-select> 上设置了 formControlName。

formControlName 将模板中的控件绑定到表单模型，在这种情况下，您将其绑定到错误的控件，因此对 select 的更改将不会被表单系统识别表格有效性没有变化。

在 mat-select selection 改变形式后不改变为 pristine = false

After mat-select selection change form not changing to pristine = false

angular-material

angular