Here is my markup:
<mat-form-field class="col-md-3" *ngIf="isShown">
<mat-select placeholder="Status" formControlName="batchStatus" [value]="selected">
<mat-option *ngFor="let Status of statusList"[value]="status.referenceDetailCode">
{{ status.referenceDetailValue }}
</mat-option>
</mat-select>
</mat-form-field>
ts code :
this.isShown = true;
this.selected = res.status;
With the above code, dropdown is not getting selected with the status that I'm setting in my typescript file.
It worked by doing this :
this.displayForm.controls.status.setValue(this.selected);
Related
I've been trying to dynamically check/uncheck the checkbox in mat-option. What's the attribute that would handle this. I've done the same thing in mat-checkbox using [(ngModel)]. Here's my code:
app.component.html
<mat-option [value]="item.name">{{item.name}}</mat-option>
app.component.ts
item = {name:'Option1', checked:true};
it should work but you have a typo, try below code with checked,
<mat-checkbox [(ngModel)]="item.checked">{{ item.name }}</mat-checkbox>
item = {name:'Option1', checked:true};
for mat-select with ngModel,
<mat-form-field appearance="fill">
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
<mat-option>None</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
in ts file,
selected = 'option2';
You have ngModel on mat-select rather than on mat-option
Need to display the empty (None) option in Material Select element when the item is null.
<mat-label>Status</mat-label>
<mat-select formControlName="statusId">
<mat-option>None</mat-option>
<mat-option *ngFor="let item of statuses" [value]="item.id">
{{ item.name }}
</mat-option>
</mat-select>
</mat-form-field>```
As seen in above snippet I need to display the "None" option selected by default when the page loads.
StackBlitz
So, you can add a empty value to the None option.
<mat-select [formControl]="foodControl" name="food">
<mat-option value="">None</mat-option>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
And, in the ts, you can initialize the control with empty value like this
foodControl = new FormControl('');
same thing can be done with ngModel as well. (included in the StackBlitz)
I am using mat-select within Angular Material as below:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
The above dropdown is coming up fine but the dropdown has no default value.
In order to add a default value, I have added value="{{dropdownSelectedName}}" as below:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)" value="{{dropdownSelectedName}}">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
The above change is still not populating the default dropdown value.
I have also tried doing [(value)]="dropdownSelectedName"
When I do console.log(this.dropdownSelectedName) in the component, I can see that it has a string value
mydefaultvalue
ngOnInit() {
this.subs.sink = this.myService.listAll()
.subscribe(r => {
this.AllList = r;
});
this.dropdownSelectedName = "mydefaultvalue";
}
To set a default value to mat-select, you have to bind compareWith property, which will compare the values and will set the default value.
Example:
In your HTML:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)" [(ngModel)]="dropdownSelectedName" [compareWith]="compareFn">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
In your TS:
compareFn(obj1: any, obj2: any) {
return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
}
the value of your mat-option is a object reference to a item Object.
therefore the value that you set on mat-select must be the exact same item object reference.
this means that in your compoenent your code should
this.dropdownSelectedName = [Insert Object Reference Here]
the alternative approach is to change your mat-option to set
<mat-option *ngFor="let item of itemList" [value]="item.name">
{{item.name}}
<mat-option>
with this change your "myDefaultValue" would match the value of one of the options, instead of being an object reference
Update
Here is a link that shows a working version of setting the value of the select when using object references.
Hi every i want to disable the input field after selected the value in drop down, and i want to reset the selected value using of reset button.
For reference Stackblitz : https://stackblitz.com/edit/mat-autocomplete-1uelcd?file=app%2Fautocomplete-display-example.html
For example:- If we selected any value in the input field then filed should be disabled after clicks the reset button it should enabled to select the value please check and help us.
Html:
<div class="example-form">
<form>
<mat-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto2">
<mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<button mat-raised-button (click)="onResetSelection()" color="primary">Reset Selection</button>
</form>
</div>
Reset:
onResetSelection() {
this.filteredOptions = [];
}
Disable:
[disabled]="filteredOptions =='option'"
You can do that with below approach
Add on select event to disable form control and while doing reset event just clear the form control.
In View :
<mat-autocomplete #auto2="matAutocomplete" (optionSelected)="onSelectionChanged($event)" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</mat-option>
</mat-autocomplete>
In Template :
...
onSelectionChanged(event: any) {
this.formGroupName.controls['myControl'].disable();
}
onResetSelection() {
// you can enable the control with below line
this.formGroupName.controls['myControl'].enable();
this.formGroupName.controls['myControl'].setValue('');
}
...
Happy Coding.. :)
HTML:
<mat-icon class="fab fa-raspberry-pi"></mat-icon>
<mat-form-field>
<mat-select placeholder="Rpi">
<mat-option>Choose</mat-option>
<mat-option *ngFor='let pi of myRpis' [(ngModel)]="RpiIp" ngDefaultControl [value]="pi.RPI_IP"
(click)="getPins()">
{{pi.LABEL}}
</mat-option>
</mat-select>
</mat-form-field>
Typescript:
I have:
RpiIp = '';
and
getPins() {
console.log(this.RpiIp);
this.doneFetching = true;
}
The console prints an empty value (the value do not change). Where is the error? why the value is not changing?
You need to place the ngModel on the mat-select, not on the mat-option
mat-select will be containing the mat-option, so you have to use ngModel on mat-select.
Consider the below code:
<select . . . name="duration" [(ngModel)]="exercisePlan.duration">
<option *ngFor="let duration of durations" [value]="duration.value">{{duration.title}}</option>
<mat-form-field>
<mat-select placeholder="Rpi" [(value)]="RpiIp">
<mat-option>Choose</mat-option>
<mat-option *ngFor='let pi of myRpis' ngDefaultControl [value]="pi.RPI_IP"
(click)="getPins()">
{{pi.LABEL}}
</mat-option>
</mat-select>
</mat-form-field>
https://stackblitz.com/angular/dybkbybngme?file=app%2Fselect-value-binding-example.ts
Based on this answer the correct answer looks like this:
<mat-icon class="fab fa-raspberry-pi"></mat-icon>
<mat-form-field>
<mat-select placeholder="Rpi" [(value)]="RpiIp">
<mat-option>Choose</mat-option>
<mat-option *ngFor='let pi of myRpis' ngDefaultControl [value]="pi.RPI_IP" (click)="getPins()">
{{pi.LABEL}}
</mat-option>
</mat-select>
</mat-form-field>
Thanks :D
<mat-icon class="fab fa-raspberry-pi"></mat-icon>
<mat-form-field>
<mat-select placeholder="Rpi" >
<mat-option>Choose</mat-option>
<mat-option *ngFor='let pi of myRpis' ngDefaultControl [value]="pi.RPI_IP" (click)="getPins()">
{{pi.LABEL}}
</mat-option>
</mat-select>
</mat-form-field>