Угловой материал: выбор матового значения по умолчанию при использовании реактивных форм

Question

Я создал форму, используя реактивные формы и угловой материал mat-select , который я использую для создания объекта с именем " core ".Основной объект имеет 2 свойства: «имя» и «владельцы».Свойство "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!')
      );
  }

Обновление формы (работает для свойства name):

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

Но список владельцев не добавляется.Странно то, что если я обновляю форму с users , она работает:

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

Таким образом, все пользователи добавляются в качестве значения по умолчанию.Но для основных владельцев это не работает.Есть идеи, что я тут не так делаю?

Заранее спасибо!

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) {
 if(o1.name == o2.name && o1.id == o2.id ) return true; else return false;
}