Angular Material form controls mat-select -- mat-option, setting the default option for updating items?

Question

I have a form that has a mat select with mat options and I'm building a reusable component where I can edit any item on the spot. I'm trying to fill in the form default values but after looking for 30 minutes at the documentation and trying various things, I can't seem to set the default selected option in any way.

    <mat-form-field>
        <mat-select [selected]="isSelected()" formControlName="category"  placeholder="Select a category">
          <mat-option *ngFor="let category of videoCategories | async" [value]="category.id">
              {{ category.name }} 
          </mat-option>
        </mat-select>
      </mat-form-field>```

I've tried to use that [selected] but it just errors out as apparently it's not an input property although it does show up in the documentation API here.

I'm thinking this must be possible otherwise it just prevents any form with mat-select to pre-fill for 'updating' functions.

I'm using Angular Material 7 with Angular 7.

EDIT:

My form control code:

this.editVideoForm = new FormGroup({
  title: new FormControl(this.videoTitle, [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
  description: new FormControl(this.videoDescription, [Validators.required, Validators.minLength(5), Validators.maxLength(200)]),
  category: new FormControl(this.categoryID, [Validators.required]),
  link: new FormControl("https://vimeo.com/" + this.videoLink, [Validators.required, AddVideoValidators.mustBeVimeo, Validators.maxLength(100)]),
  visibleToGuests: new FormControl(this.visibleToGuests, [Validators.required])
})

`selected` isn't an input property in doc. It returns "The currently selected option." as in the API doc. — User3250, Nov 05 '18 at 11:22

score 4 · Accepted Answer · answered Nov 05 '18 at 11:13

4

To select a value as default, you need to give your control the desired value.

Here is a stackblitz to show you that : https://stackblitz.com/edit/angular-gqw9yb?file=app/select-multiple-example.ts

export class SelectMultipleExample {
  toppings = new FormControl('Mushroom');
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

<mat-select placeholder="Toppings" [formControl]="toppings">
  <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>

answered Nov 05 '18 at 11:13

I am doing this already, have updated the code to my formcontrol and I am console.logging the value of it and the form control does have the right value but that option is clrealy not selected :( – SebastianG Nov 05 '18 at 11:15
1

You see it working in my blitz, but it doesn't work in yours : in this case, you need to provide a [mcve] reproducing the issue ; either you will resolve it yourself by discovering your error, or I'll have something that doesn't work in front of me, that I can correct. – Nov 05 '18 at 11:16
your example helped troubleshooting my stuff. It turns out I have been creating the values on the front end based on the global variable of the categories instead of the local input property that I'm plugging into the reusable component. I have let the global categories in but have added as a static category option the default value. Now I have that default value as a duplicate though. Will try to find a work around but even that should be fine. – SebastianG Nov 05 '18 at 11:38
See, you resovled it yourself :) I suggest you delete your question, as it was an error on your side that will be hardly reproductible by someone else in the future. If you don't, then thank you for the reputation, and anyway, good luck with your project ! – Nov 05 '18 at 11:39
I don't think this is working with formGroup i.e model driven forms, is it? – Pardeep Jain Nov 04 '19 at 12:49

Angular Material form controls mat-select -- mat-option, setting the default option for updating items?

1 Answers1