Angular Material mat-select не загружает начальное значение

У меня проблема с компонентом mat-select, все работает нормально, но он просто не установил начальное значение при редактировании ... Если я перейду на простой HTML, все будет работать нормально. Я что то не так делаю?

HTML-выбор, который отлично работает:

<select formControlName="category" [compareWith]="compareFn">
    <option [ngValue]="c" *ngFor="let c of categoriesService.categories$ | async"> {{c.name}}</option>
  </select>

Компонент Angular Material, который работает не так, как ожидалось:

<mat-form-field>
    <mat-select placeholder="Category" formGroupName="category" (selectionChange)="setCategoryValueOnForm($event)"
                [compareWith]="compareFn" >
      <mat-option *ngFor="let c of categoriesService.categories$ | async" [value]="c">
        {{c.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

При использовании простого элемента select я вижу, что моя функция compareFn работает, но с Angular Material значение y всегда не определено ...

compareFn(x: ICategory, y: ICategory): boolean {
   console.log(x);
   console.log(y);
   console.log('CALLED COMPARE FN');
   return x && y ? x.id === y.id : x === y;
 }

gif с проблемой:

введите здесь описание изображения Я что-то не так делаю? Спасибо!


angular6 angular-material-6
person Victor Carvalho    schedule 25.09.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я только что понял, что использовал formGroupName = "category", когда правильным было formControlName = "category" ...

<mat-form-field hintLabel="select one">
    <mat-select placeholder="Category" formControlName="category"
                [compareWith]="compareIds">
      <mat-option *ngFor="let c of (categoriesService.categories$ | async)" [value]="c">
        {{ c.name }}
      </mat-option>
    </mat-select>
    <mat-error>
      {{ getError('category') }}
    </mat-error>
  </mat-form-field>

.ts

compareIds(category1: ICategory, category2: ICategory): boolean {
    return category1 && category2 ? category1.id === category2.id : category1 === category2;
}
person Victor Carvalho    schedule 26.09.2018