时间戳

首页 > 解决方案 > angular mat-select 在表单中设置默认值

html - angular mat-select 在表单中设置默认值

问题描述

有一个带有嵌套对象的数据模型：

export interface Model {
  someField1:string;
  someField2:string;
  someObject: Object;
}

export interface Object {
  someField1: string;
  someField2: string;
  someField3: string;
}

这个模型有一个表格：

formBuilder.group({
  someField1: null,
  someField2: null,
  someObject: formBuilder.group({
    someField1: null,
    someField2: null,
    someField3: null
})

这个对象有一个角度分量：

  <mat-form-field>
    <mat-select placeholder="Some Object" formGroupName="someObject">
      <mat-option *ngFor="let object of someObjectes" [value]="object">
        {{ object.someField1 }}
      </mat-option>
    </mat-select>
  </mat-form-field>

我接受来自服务器的对象列表，然后让我选择用户需要的对象。选择必须与表单相关联，如果接收到的模型已经有关于对象的数据，那么它们应该显示为预选项目。

标签： htmlangulartypescriptangular-material

解决方案

Angular Material mat-select 提供了一个compareWithAPI，您可以向该 API 传递一个映射函数来设置默认值。

这是一个有效的 Stackblitz示例

推荐阅读