Angular Material Select - preselecting multiple values

Question

In my case angular role is to receive JSON-entity from API and assign it's values to FormGroup. Everything works fine (FormGroup contains all expected values), but mat-select does not visually preselect given values.

All functionality described before is contained in onInit() method.

product-group-update.component.ts: full code: https://pastebin.com/hXLqBAcF

export class ProductGroupUpdateComponent implements OnInit {
  NO_PRODUCT: string = 'No product';
  editProductGroupForm: FormGroup;
  id: number;
  isFormSubmitted = false;
  availableProducts: Product[];
  toSelect: Product[];
 
  constructor(
    private formBuilder: FormBuilder,
    private productGroupService: ProductGroupService,
    private productService: ProductService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location,
 
  ) {
  }
 
  ngOnInit(): void {
    this.editProductGroupForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.maxLength(100)]],
      description: ['', [Validators.required, Validators.maxLength(100)]],
      products: ['', []],
    });
 
    this.activatedRoute.paramMap.subscribe(params => {
      this.id = +params.get('id');
      this.productGroupService.getProductGroupById(this.id).subscribe(
        receivedProductGroup => {
          this.toSelect = receivedProductGroup.products;
          this.editProductGroupForm.setValue({
            name: receivedProductGroup.name,
            description: receivedProductGroup.description,
            products: receivedProductGroup.products,
          });
        }
      );
    });
    console.log(this.editProductGroupForm)
 
    this.productService.getAllProducts(new Page<Product>()).subscribe(response => {
      this.availableProducts = response.content;
    });
  }
 
  ...

}

product-group-update-component.html full code: https://pastebin.com/9GqyU2r2

<div class="col-md-12">
  <div class="card card-container">
 
    <form (ngSubmit)="submitForm()" [formGroup]="editProductGroupForm" class="new-obj-form" id="register-form">
      

      ...

 
      <mat-form-field appearance="fill" class="example-full-width">
        <mat-label>Products</mat-label>
        <mat-select formControlName="products" multiple [(value)]="toSelect">
          <mat-option [value]="NO_PRODUCT">{{NO_PRODUCT}}</mat-option>
          <mat-option *ngFor="let product of availableProducts" [value]="product">
            {{product.name}}
            <i><small>(ID: {{product.id}})</small></i>
          </mat-option>
        </mat-select>
      </mat-form-field>
 

    ...
 

    </form>
  </div>
</div>

As you can see: editProductGroupForm contains all the values:

And toSelect element (from which mat-select should take preselected values) too:

But mat-select does not preselect any values:

Other code:

export interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  groupId: number;
  sold: boolean;
}


import {Product} from "./product";

export interface ProductGroup {
  id: number;
  name: string;
  description: string;
  products: Product[];
}

In Angular, when using the subscribe you cannot ensure that the data arrives before the page is rendered, to check if this is the problem you could establish a resolver so that the rendering of the component waits for the data, or to try to include the mat-select a * ngIf = "this.toSelect" — JLazar0
– JLazar0, Commented Sep 16, 2020 at 14:10

TotallyNewb · Accepted Answer · 2020-09-16 14:19:15Z

1

Have in mind, that the Products in availableProducts and toSelect are different objects. So, when even though they have all the same properties, they are still different instances, meaning the comparison of the objects will return a false - that's why they're not selected.

You can fix it using two different approaches:

mat-select supports the compareWith function - so you can override the default comparison and compare them, say, by Id. See official angular docs here for how it works. An example is avaialable in material docs as well.
Use rxjs to combine both of your API calls and make sure that your toSelect are actual instances of the objects from the availableProducts table.

answered Sep 16, 2020 at 14:19

TotallyNewb

4,8801 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material Select - preselecting multiple values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related