Angular 2 - setting default value in dropdown when default is hard coded
Object attributes are case sensitive, in your object, attribute is called careProvider
, but in your template, you are using searchModel.careprovider
with lowercase p
. I think you also have to use NgValue
directive instead of value
because you are using NgModel
directive. So, this should work: it is not working
<select [(ngModel)]="searchModel.careProvider">
<option [ngValue]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
{{user.dn}}
</option>
</select>
Set default value of dropdown in Angular 6
Set validation.min with required as well like below one.
supplierId: ["", [Validators.required, Validators.min(1)]]
supplierId is always greater zero so min(1) works for you.
Select default option value from typescript angular 6
You can do this:
<select class='form-control'
(change)="ChangingValue($event)" [value]='46'>
<option value='47'>47</option>
<option value='46'>46</option>
<option value='45'>45</option>
</select>
// Note: You can set the value of select only from options tag. In the above example, you cannot set the value of select to anything other than 45, 46, 47.
Here, you can ply with this.
Angular - Setting default value for dropdown - solutions not working?
The reason could be the type of values you are setting as default and the type of objects you are looping through.
The type is string
here:
<mat-select (selectionChange)="doSomething($event)" [value]="language">
<mat-select (selectionChange)="doSomething($event)" [value]="English">
But it's JSON object here:
<mat-option *ngFor="let language of languages" [value]="language">
{{language.viewValue}}
</mat-option>
Make both the same type, both JSON objects or both strings.
If you use [value]="languages[0]"
it would set default value using the first element of the languages array.
https://github.com/angular/components/issues/7771#issuecomment-336482394
Angular 2, set default value to select option
update
4.0.0-beta.6 added compareWith
<select [compareWith]="compareFn" [(ngModel)]="selectedCountries">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
compareFn(c1: Country, c2: Country): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
this way the instance assigned to selectedCountries
doesn't need to be the identical object, but a custom comparison function can be passed, for example to be able to match an different object instance with identical property values.
original
If you want to use an object as value you need to use [ngValue]
on the option element.
<select name="select" id="select" [(ngModel)]="selectLanguage">
<option *ngFor="let item of selectOption" [ngValue]="item"
[disabled]="item.value==0">{{item.label}}</option>
</select>
When selectLanguage
has an options value assigned [(ngModel)]="..."
will this one make the one selected by default:
import {Component} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-form-select',
templateUrl: 'default.component.html'
})
export class DefaultComponent {
private selectOption: any;
constructor() {
this.selectOption = [
{
id: 1,
label: "Select Language",
value: 0
}, {
id: 2,
label: "HTML 5",
value: 1
}, {
id: 3,
label: "PHP",
value: 2
}, {
id: 4,
label: "Javascript",
value: 3
}
];
this.selectLanguage = this.selectOption[0];
}
}
Related Topics
Using Flex Order Property to Re-Arrange Items For Desktop and Mobile Views
Why Is 'Position: Sticky' Not Working With Core Ui'S Bootstrap Css
Html5 - Canvas Element - Multiple Layers
Why Can't ≪Fieldset≫ Be Flex Containers
How to Format an HTML Tooltip (Title Attribute)
Change Color of Sibling Elements on Hover Using Css
Is Autocomplete="Off" Compatible With All Modern Browsers
Input Type Image Submit Form Value
Twitter Bootstrap 3 Sticky Footer
Printing "≪Html≫" Using Html
How to Add 1Px Margin to a Flex Item That Is Flex: 0 0 25%
Bootstrap 3 Two Columns Full Height
Twitter Bootstrap 3, Vertically Center Content
Masonry-Style Layout Only With Css