首页 > 解决方案 > 如何设置初始值以在Angular中选择formly字段

问题描述

我使用 api 创建了一个自定义选择类型组件来填充下拉列表。有一个 stackblitz 示例。 Stackblitz 我无法为选择类型组件设置初始值。事实上,我将此代码用于没有构造函数来调用服务的组,所以我无法解决它。 https://stackblitz.com/edit/ngx-formly-demo?file=src%2Fapp%2Fforms%2Fgroups%2Faddress.group.ts

标签: angularangular-material

解决方案


使用compareWith

在检查更改时跟踪用于跟踪身份的选项比较算法。

组件.html

<mat-select
    [compareWith]="compareFn" 
      [id]="id"
      [formControl]="formControl"
      [formlyAttributes]="field"
      [multiple]="to.multiple"
      (selectionChange)="to.change && to.change(field, formControl)"
      [errorStateMatcher]="errorStateMatcher"
    >
      <ng-container *ngFor="let item of to.options">
        <mat-option [value]="item" [disabled]="item.disabled">{{
          item.name
        }}</mat-option>
      </ng-container>
    </mat-select>

组件.ts

compareFn(o1: any, o2: any) {
    return o1.id === o2.id;
}

分叉示例


推荐阅读