Angular Material: mat-select default value when using reactive forms

Question

I created a form using reactive forms and angular material mat-select which I use to create an object called "core". The core object has 2 properties: "name" and "owners". The "owners" property is an array of IUser objects.

The core object:

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

The form:

<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>

The "users" variable is an array of all available users that can be selected.

 users: IUser[];

The form works great but now I want to use the same form to edit a core object and for that I need to display the core owners in the "owners" form control when the page is loaded.

Form creation:

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

How I get the core:

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!')
      );
  }

Form update(it works for the name property):

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

But the owners list is not added. The strange thing is that if I update the form with the users it works:

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

This way all the users are added as the default value. But for the core owners it's not working. Any idea what I do wrong here?

Thanks in advance!

did you try adding [compareWith]="defineYourCompareFunction" to your mat-select ? — Ala A.
– Ala A., Commented May 17, 2019 at 13:50
compareFunction(o1: any, o2: any) { if(o1.name == o2.name && o1.id == o2.id ) return true; else return false } — Ala A.
– Ala A., Commented May 17, 2019 at 13:52
From the documentation: /** A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned. **/ — NicuVlad
– NicuVlad, Commented May 17, 2019 at 13:54

rofrol · Accepted Answer · 2024-07-17 10:39:48Z

29

You need to define the criteria based on which an object becomes considered as selected using the [compareWith] directive as follows:

<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>

and define your compareFunction:

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

edited Jul 17, 2024 at 10:39

rofrol

15.4k8 gold badges88 silver badges87 bronze badges

answered May 17, 2019 at 14:04

Ala A.

2,34526 silver badges35 bronze badges

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

Comments

MJ X · Accepted Answer · 2020-07-11 19:42:40Z

1

I agree with above answer I am posting this for users who have Angular mat-select and using reactive forms.

You can use the patchValue of Angular Reactive forms to have the default value selected

in your component in ngOnInit() or any place you want to have your dropdown selected value call patchValue function like below code:

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

answered Jul 11, 2020 at 19:42

MJ X

9,12413 gold badges85 silver badges124 bronze badges

Collectives™ on Stack Overflow

Angular Material: mat-select default value when using reactive forms

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related