CODEWITHSUNDEEP
angulartypescriptangular-reactive-formsangular-material-7
clyde correa
clyde correa

Reputation: 86

on page load put default value in mat select dropdown

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

Upvotes: 0

Views: 4328

Answers (3)

jalex19
jalex19

Reputation: 201

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>

Upvotes: 0

Hemendra
Hemendra

Reputation: 388

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() {
  }
}

Upvotes: 0

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

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

Upvotes: 1

Related Questions