Angular Material：在使用响应式表单时，mat-select的默认值是什么？

Question

我使用响应式表单和Angular Material的mat-select创建了一个表单，用于创建名为“core”的对象。Core对象有两个属性：“name”和“owners”。 “所有者”属性是一个IUser对象的数组。

核心对象：

export interface ICore {
  id?: number;
  name: string;
  owners: IUser[];
}

表格：

<form [formGroup]="parentForm">
      <mat-form-field class="example-full-width">
        <input matInput formControlName="name" placeholder="Name">
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <mat-label>Users</mat-label>
        <mat-select formControlName="owners" multiple>
          <mat-option *ngFor="let user of users" [value]="user"> {{ user.username }}</mat-option>
        </mat-select>
      </mat-form-field>
    </form>

"users" 变量是一个包含所有可供选择的用户的数组。

 users: IUser[];

表单功能很好，但现在我想使用同一个表单来编辑核心对象，为此当页面加载时，我需要在"所有者"表单控件中显示核心所有者。

创建表单：

  createForm() {
    this.coreForm = this.formBuilder.group({
      name: ['', [Validators.required]],
      owners: ['', [Validators.required]]
    });
  }

如何获取核心：

getCore() {
    this.coreService.getCore(this.route.snapshot.params['id'])
      .subscribe(
        res => {
          this.core = res;
          this.updateForm();
        },
        err => this.toastr.error('Core has not been received!', 'Error!')
      );
  }

表单更新（它适用于名称属性）：

  updateForm() {
        this.coreForm.patchValue({
          name: this.core.name,
          owners: this.core.owners
        });
      }

但所有者列表没有被添加。奇怪的是，如果我使用用户更新表单，它就能正常工作：

  getUsers() {
    this.usersService.getUsers()
    .subscribe(
      res => {
        this.users = res;
        this.coreForm.patchValue({
          owners: res
        });
      },
      err => this.toastr.error('User could not be received!', 'Error!')
    );
  }

以这种方式，所有用户都被添加为默认值。但对于核心所有者来说，它不起作用。您有任何想法我在这里做错了什么吗？

提前致谢！

- NicuVlad

---

你尝试过在 mat-select 中添加 [compareWith]="defineYourCompareFunction" 吗？ - Ala Abid

@ala，不好意思，我之前不知道这个属性。 - NicuVlad

compareFunction(o1: any, o2: any) { if(o1.name == o2.name && o1.id == o2.id ) return true; else return false } - Ala Abid

那是一个比较函数的例子，你可以试一下并让我知道。 - Ala Abid

从文档中： /** 用于比较选项值和所选值的函数。第一个参数是选项中的值。第二个参数是选择中的值。应返回布尔值。 **/ - NicuVlad

没错，您可以根据定义的标准来确定哪些对象被视为已选择。 - Ala Abid

Answer 1

你需要使用[compareWith]指令定义基于哪些标准来确定一个对象被视为已选。

<form [formGroup]="parentForm">
      <mat-form-field class="example-full-width">
        <input matInput formControlName="name" placeholder="Name">
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <mat-label>Users</mat-label>
        <mat-select [compareWith]="compareFunction" formControlName="owners" multiple>
          <mat-option *ngFor="let user of users" [value]="user"> {{ user.username }}</mat-option>
        </mat-select>
      </mat-form-field>
</form>

并定义您的比较函数：

compareFunction(o1: any, o2: any) {
 return (o1.name == o2.name && o1.id == o2.id);
}

- Ala Abid

Answer 2

我同意上面的答案，我发表这篇文章是为了那些使用Angular mat-select和响应式表单的用户。

您可以使用Angular响应式表单的patchValue来选择默认值。

在您的组件中，在ngOnInit()或任何您想要选择下拉列表的值的地方， 调用patchValue函数，像下面的代码一样：

  this.yourFrom.patchValue({
      CategoryID:1
    });

- MJ X