on page load put default value in mat select dropdown

Question

I have created a form, I am using angular material and I can successfully get and set the value in text feild or in textarea field but not able to put a value in a dropdown, I have two json data. First will fill the dropdown and after that second one will set the value of dropdown. So onload page I have to display that value on the dropdown which is not getting set

  createProductForm(): FormGroup {
    return this._formBuilder.group({
      CATEGORY: [this.product.categories]
    });
  }


 ngOnInit() {
  getAllCategory=[
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "PUBLIC"},
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "PRIVATE"},
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "SYSTEM"},
]

defaultSelectCategory=[
{"CATEGORY": "PRIVATE"}
]


this.defaultCat= defaultSelectCategory[0].CATEGORY;
}




<mat-form-field appearance="outline" fxFlex="100">
   <mat-label>Project</mat-label>
   <mat-select formControlName="CATEGORY" [(value)]="defaultCat" required >
 <mat-option *ngFor="let item of getAllCategory" value="{{item.TYPE_DESC}}" (onSelectionChange)="getCATEGORY(item)">
     {{item.TYPE_DESC}}
  </mat-option>

  </mat-select>
     <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
   </mat-form-field>

don't know somehow I am not able to set a default value to dropdown Onload. thank you so much. and btw today is my birthday so don't forget to wish me. lol

I can see a typo in this line "this.defaultCat= defaultSelectCategory[0].CAREGORY;", replace CAREGORY with CATEGORY — Hemendra, Oct 04 '19 at 06:41

score 1 · Answer 1 · answered Oct 03 '19 at 10:37

1

Try using ngModel

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

And the value with box bracket in the mat options

answered Oct 03 '19 at 10:37

Hitech Hitesh

1,641
1
9
18

score 0 · Accepted Answer · answered Oct 04 '19 at 07:13

I can see many problems in your code, variables (getAllCategory, defaultSelectCategory) are declared inside ngOnInit(), which is wrong. You need to declare them at top and use it inside ngOnInit() using 'this' keyword.

I've created a working fork here - https://stackblitz.com/edit/angular-5r6u3p-dhwgqm Have a look at it.

DatePicker HTML

<mat-form-field appearance="outline" fxFlex="100">
<mat-label>Project</mat-label>
<mat-select [(value)]="defaultCat" required>
    <mat-option *ngFor="let item of getAllCategory" value="{{item.TYPE_DESC}}"
        (onSelectionChange)="getCATEGORY(item)">
        {{item.TYPE_DESC}}
    </mat-option>
</mat-select>
<mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>

DatePicker TS

export class DatepickerValueExample {
  getAllCategory=[
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "PUBLIC"},
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "PRIVATE"},
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "SYSTEM"},
  ]
  defaultSelectCategory=[
    {"CATEGORY": "PRIVATE"}
  ]
  defaultCat;

  ngOnInit() {
    this.defaultCat= this.defaultSelectCategory[0].CATEGORY;
  }

  getCATEGORY() {
  }
}

You made my day..although declaration is not the problem but this works for me...thank you so much. — clyde correa, Oct 04 '19 at 13:41

score 0 · Answer 3 · answered Oct 04 '19 at 07:29

So first, I'd sugges a couple of things:

Since you're using model drive forms (with ReactiveFormsModule), you don't need the [(value)]
You don't need the required attribute in the mat-select form either, this will throw an annoying warning in your console.
Your default value doesn't need to be an array, you can use directly an object :)
Move your value setter and the required validation to your model

First change your default value to an object, or to not repeat yourself you can do it with the same array you already have:

this.defaultSelectCategory = this.getAllCategory[1];

Now, let's say your dropdown formControlName is like this:

CATEGORY: new FormControl(this.defaultSelectCategory.TYPE_DESC, [Validators.required]),

Then in your HTML:

<mat-form-field appearance="outline" fxFlex="100">
  <mat-label>Project</mat-label>
  <mat-select formControlName="CATEGORY">
  <mat-option *ngFor="let item of getAllCategory" [value]="item.TYPE_DESC">
    {{item.TYPE_DESC}}
  </mat-option>

 </mat-select>
 <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>

on page load put default value in mat select dropdown

3 Answers3