I have a dropdown menu using an *ngFor loop and all the options are data bound. I'm trying to put a placeholder in until one option is selected and if I use the first set of code the placeholder appears perfectly but when I include the [(ngModel)] (which I need) the placeholder disappears.
Note: The ngModel is bound to the index of the dropdown so I can use that to filter a JSON file, which is why I also have an index running.
I've tried using 'placeholder' and 'required placeholder' and adding an initial option in before the for loop options
HTML Code with working placeholder but no ngModel
<label for="filter-coach-sel">Option</label>
<select required placeholder="" class="form-control" id="filter-coach-sel" >
<option hidden value="" disabled selected>Select an option </option>
<option *ngFor = " let coach of navHistory;">{{coach.account.name}}</option>
</select>
HTML Code with ngModel but placeholder no longer works
<div class="form-group">
<label for="filter-coach-sel">Coach</label>
<select required placeholder="" [(ngModel)]="selectedCoachIndex" (change) = "changeCoach()" class="form-control" id="filter-coach-sel" >
<option disabled selected>Select one category </option>
<option *ngFor = " let coach of navHistory; let i = index" value="{{i}}"> {{coach.account.first_name}}</option>
</select>
</div>
Since you are using ngModel to bind the select box, your placeholder option also needs to be one among the value. Try initializing as selectedCoachIndex=""; as assigning value="" for your option
<div class="form-group">
<label for="filter-coach-sel">Coach</label>
<select [(ngModel)]="selectedCoachIndex" class="form-control" >
<option disabled selected value="">Select one category </option>
<option *ngFor = " let coach of navHistory; let i = index" value="{{i}}"> {{coach.first_name}}</option>
</select>
</div>
And your .ts file would have something like this
navHistory = [{
first_name: 'Bob'
},{
first_name: 'Jon'
},{
first_name: 'Mat'
}];
selectedCoachIndex = "";
Stackblitz Demo
Related
I'm trying to use a placeholder for dropdowns in the select tag, but the placeholder isn't working. Also, I tried some other options, but they didn't work.
<select class="form-control" [(ngModel)]="Category" required placeholder="Category">
<option value="" disabled selected>Select one category </option>
<option *ngFor="let data of array" [value]="data.Value">{{data.Name}}</option>
</select>
I have a select tag where I remove the [(ngModel)]="Category" properties and it shows the placeholder option, but when I add them it shows Blank in Placeholder.
In TS File declare your [(ngModel)] as null, it will work,
I have attached the stackblitz demo as well.
You can use an option with disabled.
In TS:
selected4 = null;
HTML
<select [(ngModel)]="selected4">
<option value="" disabled selected>Select your option</option>
<option value="1">Hey</option>
<option value="2">Hello</option>
</select>
stackblitz
So guys, I have this very simple snippet
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" (change)="onChooseMenuItem($event.target.value)">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>
when i make a choice it always shows me the first option as selected. Let's say ngrxMenuItems is an array with [1,2,3,4]. No matter what is the choice you make it will show you only the first option.
What i tried:
- removing (change)="onChooseMenuItem($event.target.value)" and replacing it with (click) event on every row
- trying ngIf options
What I assume it is:
= Some Angular behaviour I am not aware of.
You main problem is here (change)="onChooseMenuItem($event.target.value), the reason being that the target property does not exist on the $event emitted event, you need to handle the value part in the ts method like so
Html
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" (change)="onChooseMenuItem($event)"> <!-- Change the (change) event emitter -->
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>
Ts
onChooseMenuItem(event: any){
const value = event.target.value;
console.log(value);
}
You do not bind a value from your component to your selection.
So select does not know which values is the actual to select as option.
You must add ngModel to your select:
<select class="form-control" id="exampleFormControlSelect1" [(ngModel)]="select1">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
'select1' is a variable in your component containing the information about the selected option.
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 have a drop down which by default on page load it select "PLEASE SELECT USECASE" in the dropdown
But i am expecting "EUC Proxy" to be selected on page load instead of "PLEASE SELECT USECASE"
HTML IS SHOWN BELOW
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option value="-1" [selected]="isSelected"> Please Select Use Case </option>
<option *ngFor="let uc of useCaseList" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
*HTML i CHANGED TO *
[selected]="1"
But it doesn't made any difference.See the changed HTML Below
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option *ngFor="let uc of useCaseList" [selected]="1" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
SAME IN IMAGE
I am getting "test Bot" selected in drop-down, which is last item in the drop down like below:
But i am expecting this: where uc.BOTId =1 is "EUC Proxy" Not "test Bot"
TS file
ngOnInit() {
getUsecaseList() {
this.manageBotService.getAllBots().subscribe(res => this.useCaseList = res);
}
}
Why i am unable to select "EUC Proxy" which having uc.BOTId =1 on page load?
Remove [selected] from your options.
The [(ngModel)] part from your 'select' will set the value to selected (depending on the value the 'scheduleModel.UsecaseId' has.
I didn't see you using the instruction that makes it default:
value='default'
for instance:
<select name='test'>
<option value='default' selected='selected'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>
Set scheduleModel.UsecaseId = 1 after loading the drop-down on ng-init().
<form>
<div class="form-group">
<label for="sel1 primary"></label>
<select class="form-control" id="sel1">
<option *ngFor="let group of instanceList"(click)="change_group(group.name)" > {{group.name}}
</option>
</select>
</div>
</form>
Sorry for bad indentation.
Instancelist list is the array of object contain, id, name, groupnumber.
I want to get the value of selected option in my calling method and want to display it in console.
function change_group(groupname){
this.change_to=groupname;
console.log(change_to);
}
The problem is, the given function not even call upon selecting value in dropdown.
Why not leave the option tags alone and just subscribe to the selection changed event in the <select> tag
<select class="form-control" id="sel1" (change)="onGroupChange($event)">
(click) on <option> is usually not how to do it.
Use instead ngModel
<select class="form-control" id="sel1" ngModel (ngModelChange)="change_group($event)">
<option *ngFor="let group of instanceList" [ngValue]="group"> {{group.name}}
</option>