I am trying to change the second dropdown to default "Select ... " option when i change anything on first dropdown. But i keep showing me blank space, i think the NG is adding extra Option tag in the beginning and i dont know why.
Here is my HTML
<div>
<select (change)="onDropChange($event.target.value)" [(ngModel)]="person.name">
<option value='default' > Select Name</option>
<option *ngFor="let item of list"> {{item}} </option>
</select>
</div>
<select [(ngModel)]="person.options">
<option value='default' [selected]="!person.options"> Select Option</option>
<option *ngFor="let item of options" value="{{item}}"> {{item}} </option>
</select>
Here is my TS
person= {
person: "sam",
options: 123
}
list = ["kenny", "sam", "stan"];
options = [122,4324,234,123]
onDropChange(value){
this.purchaser.options = null
}
code: https://stackblitz.com/edit/angular-3xo9sv?file=src%2Fapp%2Fapp.component.ts
It's because you don't have any option with value = null, wich is the value you're assigning to this.person.options.
Option 1
Make your default option to be equal to null:
<select [(ngModel)]="person.options">
<option [value]="null" [selected]="!person.options"> Select Option</option>
<option *ngFor="let item of options" value="{{item}}"> {{item}} </option>
</select>
note the [value]="null". Now, there's actually an option that matches with the value you're assigning to it.
Option 2
If you don't want your default option to be equal to null, just make sure that the value you're assigning to this.person.options matches with your default option. In the code you provided it's value='default', so basically you just need to
onDropChange(value){
this.person.options = 'default';
}
Make sure giving proper types to your object since right now it's declaring it as number so you may have a problem. You may create your type but an easy/quick fix to get rid of this problem is declaring it as any.
Again, I suggest to define this better.
export class AppComponent {
person:any = {
name: "sam",
options: 123
}
...
}
I have the following select in my template:
<select class="form-control" formControlName="tipo" name="tipo">
<option value="" selected disabled>(Select an option)</option>
<option value="FACT">Factura</option>
<option value="NOCRE">Nota Crédito</option>
</select>
however, despite I have put the selected directive to the first one, it does not show if the user does not click the select. It behaves like another option tag.
How can I make this option visible when the component loads without user interaction?
Since value is "" for 'Select..' option, set value "" in it's formcontrol
Working Demo
Try like this:
this.yourForm= new FormGroup({
'tipo':new FormControl(''),
});
why not Adding a model :
in your class :
tipo: string = "";
in HTML :
<select [(ngModel)]="tipo" class="form-control">
<option value="" selected disabled>(Select an option)</option>
<option value="FACT">Factura</option>
<option value="NOCRE">Nota Crédito</option>
</select>
I need to set a default value/placheholder in my select option, it looks easy to do but I wasn't able to do it. I've tried different things but I got the same result.
<select class="form-control border custom-select" [compareWith]="compareFn"
[(ngModel)]="skill.category">
<option selected disabled="disabled">Chose a category...</option>
<option *ngFor="let cat of categories" [ngValue]="cat"
[hidden]="cat.id === 1">{{cat.name}}</option>
</select>
compareFn(c1: Skill, c2: Skill): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
My output is something like this:
[CATEGORY id=1] default //I want this to be totaly hidden (id=1 hidden)
dropdown {
[Chose a category...]
[CATEGORY id=2]
[CATEGORY id=3]
[CATEGORY id=4]
...
} end dropdown
To achieve expected result, use slice pipe
slice: 1 - if the value to be removed is always first option
<select class="form-control border custom-select">
<option selected disabled="disabled">Chose a category...</option>
<option *ngFor="let cat of categories| slice:1" [ngValue]="cat">
{{cat.name}}</option>
</select>
code reference - https://stackblitz.com/edit/angular-ay8zzk
Please refer this link for more details on Slice Pipe - https://angular.io/api/common/SlicePipe
in template you can in many ways, one more is:
<select class="form-control border custom-select" [compareWith]="compareFn"
[(ngModel)]="skill.category">
<mat-label>Chose a category...</mat-label>
<ng-container *ngFor="let cat of categories" >
<option *ngIf="cat.id !== 1" [ngValue]="cat">{{cat.name}}</option>
</ng-container>
</select>
use mat-label if the value od the disabled option is not a valid option,
the user must not be able to select a not valid option
do you really need the value of the selected to be the entire object?
or better removing before template
http.get<cat[]>('url').pipe(
map(list => list.filter(one => one.id !== 1))
).subs...
or even better removing from query in the database
I'd suggest not sending down the result for ID: 1 as you will not be utilizing it. Component would be something like:
import { Component } from "#angular/core";
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "CodeSandbox";
category = 0;
categories = [
{ id: 2, name: "Opel" },
{ id: 3, name: "Mazda" },
{ id: 4, name: "BMW" }
];
}
Template:
<select class="form-control border custom-select" [(ngModel)]="category">
<option selected disabled="disabled" [value]="0">Chose a category...</option>
<option *ngFor="let cat of categories" [value]="cat.id">{{cat.name}}</option>
</select>
I have a select HTML element in an Angular ngFor loop:
<select formControlName="type" required>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
In Internet Explorer, the first item in the list is selected when the template loads, but it's value isn't set in the form control, so causes a 'required' validation error until another value is selected in the list. I want to have a 'Please select' option that has a null value to prevent this happening.
This is for Angular 2+ used with or without TypeScript
Add an option like so:
<option [ngValue]="null">Please select</option>
So your control will look like:
<select formControlName="type" required>
<option [ngValue]="null">Please select</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
This works as Angular inspects the value attribute because of the square brackets. The value becomes a true null, unlike if we used value="" (this is just an empty string and doesn't match null).
In case you're not using ngForm, another approach to implementing the selected value is to do something like [value]='selectedType' (change)='selectedType = $event.target.value' in your select tag. For example:
In your component.ts:
public selectedType: string;
In your component.html
<select [value]='selectedType' (change)='selectedType = $event.target.value'>
<option value=''>-- Select your Type --</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
component.ts
public selectedValue = 'None';
component.html:
<div ">
<label>Highlight</label>
<select [(ngModel)]="selectedTrunk" (change)="onChangeTrunk($event)">
<option value='None'>None</option>
<option *ngFor="let trunklist of DRLNameTrunkList" [selected]="trunk" [value]="trunklist.SIPTRUNKNAME">{{trunklist.SIPTRUNKNAME}}</option>
</select>
</div>
This is my code pelase modify as per your requirements
In Angular 1 I could select the default option for a drop down box using the following:
<select
data-ng-model="carSelection"
data-ng-options = "x.make for x in cars" data-ng-selected="$first">
</select>
In Angular 2 I have:
<select class="form-control" [(ngModel)]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
<option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>
How could I select a default option given my option data is:
[{name: 'arm'}, {name: 'back'}, {name:'leg'}] and my value I to default on on is back?
Add a binding to the selected property, like this:
<option *ngFor="#workout of workouts"
[selected]="workout.name == 'back'">{{workout.name}}</option>
If you assign the default value to selectedWorkout and use [ngValue] (which allows to use objects as value - otherwise only string is supported) then it should just do what you want:
<select class="form-control" name="sel"
[(ngModel)]="selectedWorkout"
(ngModelChange)="updateWorkout($event)">
<option *ngFor="let workout of workouts" [ngValue]="workout">
{{workout.name}}
</option>
</select>
Ensure that the value you assign to selectedWorkout is the same instance than the one used in workouts. Another object instance even with the same properties and values won't be recognized. Only object identity is checked.
update
Angular added support for compareWith, that makes it easier to set the default value when [ngValue] is used (for object values)
From the docs https://angular.io/api/forms/SelectControlValueAccessor
<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 a different (new) object instance can be set as default value and compareFn is used to figure out if they should be considered equal (for example if the id property is the same.
Add this Code at o position of the select list.
<option [ngValue]="undefined" selected>Select</option>
just set the value of the model to the default you want like this:
selectedWorkout = 'back'
I created a fork of #Douglas' plnkr here to demonstrate the various ways to get the desired behavior in angular2.
You Can approach this way:
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>
or this way:
<option *ngFor="let workout of workouts" [attr.value]="workout.name" [attr.selected]="workout.name == 'leg' ? true : null">{{workout.name}}</option>
or you can set default value this way:
<option [value]="null">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>
or
<option [value]="0">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>
Use index to show the first value as default
<option *ngFor="let workout of workouts; #i = index" [selected]="i == 0">{{workout.name}}</option>
According to https://angular.io/api/forms/SelectControlValueAccessor you
just need the following:
theView.html:
<select [compareWith]="compareFn" [(ngModel)]="selectedCountries">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
theComponent.ts
import { SelectControlValueAccessor } from '#angular/forms';
compareFn(c1: Country, c2: Country): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
Struggled a bit with this one, but ended up with the following solution... maybe it will help someone.
HTML template:
<select (change)="onValueChanged($event.target)">
<option *ngFor="let option of uifOptions" [value]="option.value" [selected]="option == uifSelected ? true : false">{{option.text}}</option>
</select>
Component:
import { Component, Input, Output, EventEmitter, OnInit } from '#angular/core';
export class UifDropdownComponent implements OnInit {
#Input() uifOptions: {value: string, text: string}[];
#Input() uifSelectedValue: string = '';
#Output() uifSelectedValueChange:EventEmitter<string> = new EventEmitter<string>();
uifSelected: {value: string, text: string} = {'value':'', 'text':''};
constructor() { }
onValueChanged(target: HTMLSelectElement):void {
this.uifSelectedValue = target.value;
this.uifSelectedValueChange.emit(this.uifSelectedValue);
}
ngOnInit() {
this.uifSelected = this.uifOptions.filter(o => o.value ==
this.uifSelectedValue)[0];
}
}
Fully fleshing out other posts, here is what works in Angular2 quickstart,
To set the DOM default: along with *ngFor, use a conditional statement in the <option>'s selected attribute.
To set the Control's default: use its constructor argument. Otherwise before an onchange when the user re-selects an option, which sets the control's value with the selected option's value attribute, the control value will be null.
script:
import {ControlGroup,Control} from '#angular/common';
...
export class MyComponent{
myForm: ControlGroup;
myArray: Array<Object> = [obj1,obj2,obj3];
myDefault: Object = myArray[1]; //or obj2
ngOnInit(){ //override
this.myForm = new ControlGroup({'myDropdown': new Control(this.myDefault)});
}
myOnSubmit(){
console.log(this.myForm.value.myDropdown); //returns the control's value
}
}
markup:
<form [ngFormModel]="myForm" (ngSubmit)="myOnSubmit()">
<select ngControl="myDropdown">
<option *ngFor="let eachObj of myArray" selected="eachObj==={{myDefault}}"
value="{{eachObj}}">{{eachObj.myText}}</option>
</select>
<br>
<button type="submit">Save</button>
</form>
You can Use that [ngModel] instead of [(ngModel)]and it is Ok
<select class="form-control" **[ngModel]="selectedWorkout"** (ngModelChange)="updateWorkout($event)">
<option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>
You can do as above:
<select class="form-control"
[(ngModel)]="selectedWorkout"
(ngModelChange)="updateWorkout($event)">
<option *ngFor="#workout of workouts;
let itemIndex = index"
[attr.selected]="itemIndex == 0">
{{workout.name}}
</option>
</select>
In above code as you can see, selected attribute of the repeating option is set on checking index of the repeating loop of list. [attr.< html attribute name >] is used for setting html attribute in angular2.
Another approach will be setting model value in typescript file as :
this.selectedWorkout = this.workouts.length > 0
? this.workouts[0].name
: 'No data found';//'arm'
Add on to #Matthijs 's answer, please make sure your select element has a name attribute and its name is unique in your html template. Angular 2 is using input name to update changes. Thus, if there are duplicated names or there is no name attached to input element, the binding will fail.
I faced the same problem while using angular 11. But finally found a solution.
<option disabled selected value="undefined">Select an Option</option>
complete example with ngFor.
<select name="types" id="types" [(ngModel)]="model.type" #type="ngModel">
<option class="" disabled selected value="undefined">Select an Option</option>
<option *ngFor="let item of course_types; let x = index" [ngValue]="type.id">
{{ item.name }} </option>
</select>
Add binding property selected, but make sure to make it null, for other fields e.g:
<option *ngFor="#workout of workouts" [selected]="workout.name =='back' ? true: null">{{workout.name}}</option>
Now it will work
<select class="form-control" name='someting' [ngModel]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
<option value="{{workout.name}}" *ngFor="#workout of workouts">{{workout.name}}</option>
</select>
If you are using form there should be name field inside select tag.
All you need to do is just add value to the option tag.
selectedWorkout value should be "back" , and its done.
If you don't want the 2-way binding via [(ngModel)], do this:
<select (change)="selectedAccountName = $event.target.value">
<option *ngFor="let acct of accountsList" [ngValue]="acct">{{ acct.name }}</option>
</select>
Just tested on my project on Angular 4 and it works! The accountsList is an array of Account objects in which name is a property of Account.
Interesting observation:
[ngValue]="acct" exerts the same result as [ngValue]="acct.name".
Don't know how Angular 4 accomplish it!
Step: 1 Create Properties declare class
export class Task {
title: string;
priority: Array<any>;
comment: string;
constructor() {
this.title = '';
this.priority = [];
this.comment = '';
}
}
Stem: 2 Your Component Class
import { Task } from './task';
export class TaskComponent implements OnInit {
priorityList: Array<any> = [
{ value: 0, label: '✪' },
{ value: 1, label: '★' },
{ value: 2, label: '★★' },
{ value: 3, label: '★★★' },
{ value: 4, label: '★★★★' },
{ value: 5, label: '★★★★★' }
];
taskModel: Task = new Task();
constructor(private taskService: TaskService) { }
ngOnInit() {
this.taskModel.priority = [3]; // index number
}
}
Step: 3 View File .html
<select class="form-control" name="priority" [(ngModel)]="taskModel.priority" required>
<option *ngFor="let list of priorityList" [value]="list.value">
{{list.label}}
</option>
</select>
Output:
You just need to put the ngModel and the value you want selected:
<select id="typeUser" ngModel="Advanced" name="typeUser">
<option>Basic</option>
<option>Advanced</option>
<option>Pro</option>
</select>
For me, I define some properties:
disabledFirstOption = true;
get isIEOrEdge(): boolean {
return /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)
}
Then in the constructor and ngOnInit
constructor() {
this.disabledFirstOption = false;
}
ngOnInit() {
setTimeout(() => {
this.disabledFirstOption = true;
});
}
And in the template I add this as the first option inside the select element
<option *ngIf="isIEOrEdge" [value]="undefined" [disabled]="disabledFirstOption" selected></option>
If you allow to select the first option you can just remove the usage of the property disabledFirstOption
In my case, here this.selectedtestSubmitResultView is set with default value based on conditions and an variable testSubmitResultView must be one and same as testSubmitResultView. This indeed worked for me
<select class="form-control" name="testSubmitResultView" [(ngModel)]="selectedtestSubmitResultView" (ngModelChange)="updatetestSubmitResultView($event)">
<option *ngFor="let testSubmitResultView of testSubmitResultViewArry" [ngValue]="testSubmitResultView" >
{{testSubmitResultView.testSubmitResultViewName}}
</option>
</select>
For More Information,
testSubmitResultViewArry: Array<any> = [];
selectedtestSubmitResultView: string;
getTestSubmitResultViewList() {
try {
this.examService.getTestSubmitResultViewDetails().subscribe(response => {
if (response != null && response !== undefined && response.length > 0) {
response.forEach(x => {
if (x.isDeleted === false) {
this.testSubmitResultViewArry.push(x);
}
if (x.isDefault === true) {
this.selectedtestSubmitResultView = x;
}
})
}
});
} catch (ex) {
console.log('Method: getTestSubmitResultViewList' + ex.message);
}
}
I faced this Issue before and I fixed it with vary simple workaround way
For your Component.html
<select class="form-control" ngValue="op1" (change)="gotit($event.target.value)">
<option *ngFor="let workout of workouts" value="{{workout.name}}" name="op1" >{{workout.name}}</option>
</select>
Then in your component.ts you can detect the selected option by
gotit(name:string) {
//Use it from hare
console.log(name);
}
works great as seen below:
<select class="form-control" id="selectTipoDocumento" formControlName="tipoDocumento" [compareWith]="equals"
[class.is-valid]="this.docForm.controls['tipoDocumento'].valid &&
(this.docForm.controls['tipoDocumento'].touched || this.docForm.controls['tipoDocumento'].dirty)"
[class.is-invalid]="!this.docForm.controls['tipoDocumento'].valid &&
(this.docForm.controls['tipoDocumento'].touched || this.docForm.controls['tipoDocumento'].dirty)">
<option value="">Selecione um tipo</option>
<option *ngFor="let tipo of tiposDocumento" [ngValue]="tipo">{{tipo?.nome}}</option>
</select>