I have a select HTML tag from two options, where I'd like to choose first option by default. In select I use angular directives: ng-change and ng-model. I'm trying to do that with adding selected = "selected" to one of my options. Below I show my html code:
<div class="col-sm-2 form-group">
<select class="form-control" ng-model="surveysFilter.dateKind"
ng-change="setcheckedDateKind(surveysFilter.dateKind)">
<option value="1" selected="selected">Generate</option>
<option value="2">Answer</option>
</select>
</div>
How should I do this? I would be grateful for help ;)
<div class="col-sm-2 form-group">
<select class="form-control" ng-model="surveysFilter.dateKind"
ng-change="setcheckedDateKind(surveysFilter.dateKind)">
<option value="1" ng-selected="true">Generate</option>
<option value="2">Answer</option>
</select>
</div>
Related
whenever I use [(ngModel)] first value becomes empty. but when I remove [(ngModel)] it is working fine.
<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" placeholder="Select Campaign" (change)="hitApiFunction(campaignInfo)">
<option value="" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData">
{{campData.campaign_name}}
</option>
</select>
By #Krishna Rathore
You can use [value]="" selected hidden
I have create a demo on Stackblitz
<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
<div class="form-group row">
<div class="col-xl-4 col-lg-6 col-md-12">
<fieldset class="form-group">
<label for="customSelect">Categories:</label>
<select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required placeholder="d.ff">
<option hidden [value]="" selected>Select one category </option>
<option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
</select>
</fieldset>
</div>
</div>
<button type="submit" class="btn btn-raised btn-danger">Save</button>
</form>
thank you everyone who tried to give an answer... its working fine now, correct ans is....
<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" (change)="hitApiFunction(campaignInfo)">
<option [value]="0" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData">
{{campData.campaign_name}}
</option>
</select>
and in ts file
campaignInfo=0;
Try to assign the campaignInfo variable with the placeholder text in your component.ts file.
e.g
export class CampaignComponent{
campaignInfo : any = "";
}
the reason behind such behavior of the placeholder being empty is you are adding ngModel in your dropdown and it is not assign with any text yet.
It will work for you because you have option tag value attribute as = ' ' for option Select Campaign thats why assign empty string for campaignInfo variable.
I was having some problem when trying to set the default selected value for dropdown using Angular typescript. Here is my code in html:
<div class="row">
<div class="form-group col-md-2">
<strong><label class="form-control-label"
jhiTranslate="staff.department"
for="field_department">Department</label></strong>
</div>
<div class="form-group col-md-4">
<select class="form-control" id="field_department"
name="department" [(ngModel)]="staff.department">
<option [ngValue]="null" selected disabled>
Please select an Option</option>
<option [ngValue]="departmentOption.id === staff.department?.id ?
staff.department : departmentOption"
*ngFor="let departmentOption of departments | orderBy: 'departmentName'">
{{departmentOption.departmentName}}</option>
</select>
</div>
</div>
When I launch the page, by default, the dropdown option for "Please select an Option" supposed to show in the dropdown, however, in my case, it is empty. Any idea why is it so?
Thanks!
You can try setting staff.department=null initially
in ts
ngOnInit() {
this.staff.department=null
}
in html
<select class="form-control" id="field_department" name="department" [(ngModel)]="staff.department">
<option [ngValue]=null disabled>Please select an Option</option>
//rest code
</select>
try <option [ngValue]="undefined" selected disabled>Please select an Option</option>
Try giving "anyvariable that is not defined in typescript" as default value to option
<select class="form-control" id="field_department" name="department"
[(ngModel)]="staff.department">
<option [ngValue]="anythingNotDefinedYet" selected disabled>
Please select an Option</option>
<option [ngValue]="departmentOption.id ===
staff.department?.id ? staff.department : departmentOption"
*ngFor="let departmentOption of departments | orderBy: 'departmentName'">
{{departmentOption.departmentName}}</option>
</select>
Stackblitz Demo showing the case
Selected attribute is not working for my angular 4 drop down. But its working properly when I remove the name property.(but then another error is occurring)
Please help me .
Here is my component.html code
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="form-group FormComponents">
<select class="form-control" id="employeeType" [(ngModel)]="EmployeeType" name="EmployeeType">
<option selected>Select Employee</option>
<option *ngFor="let nation of Countries" value="{{nation.C_ID}}">{{nation.C_NAME}}</option>
</select>
</div>
</div>
Because Angular behaves differently than your usual HTML.
To select an option in Angular, you have to set the value of your select to the options you want selected. In your case :
<select class="form-control" id="employeeType" [(ngModel)]="EmployeeType" name="EmployeeType">
<option value="">Select Employee</option>
<option *ngFor="let nation of Countries" value="{{nation.C_ID}}">{{nation.C_NAME}}</option>
</select>
In yout components TS :
EmployeeType = '';
Just making sure, are you using a <form>? You do not need the name="employeetype" if you are not using a <form>. The below should work if you are using a <form>, if you are not, then drop the name="employeetype".
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="form-group FormComponents">
<select class="form-control" id="employeeType" [(ngModel)]="EmployeeType" name="employeetype">
<option selected>Select Employee</option>
<option *ngFor="let nation of Countries" [value]="nation.C_ID">{{nation.C_NAME}}</option>
</select>
</div>
</div>
I have an template, where a service populates the values used in a select box. Like so:
<div class="form-group">
<label for="backings_select">Backing</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
</select>
</div>
The above works fine. So I figured, if the array backings only has one item, I might as well have angular auto select the one value that is available (for UI improvement)
So for a basic, hacky proof of concept I tried:
<div *ngIf="backings?.length == 1" class="form-group">
<label for="backings_select">Backing Single</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id" selected="selected">{{backing.name}}</option>
</select>
</div>
<div *ngIf="backings?.length > 1" class="form-group">
<label for="backings_select">Backing Multiple</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
</select>
</div>
Now if backings.length == 1, the following html is rendered:
<option selected="selected" value="1: 1" ng-reflect-ng-value="1">nameValue</option>
And if backings.length > 1 the following html is rendered:
<option value="0: 1" ng-reflect-ng-value="1">nameValue1</option>
<option value="1: 2" ng-reflect-ng-value="2">nameValue2</option>
Now in theory, the above code should work, however when length==1 the html select box is not auto selecting the value with selected="selected". Have I missed anything, or is there any reason why the select is not auto selecting?
use [selected] instead of selected
<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
without using ngIf and duplicating your code you can achieve the desired result like this:
<div class="form-group">
<label for="backings_select">Backing</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
{{backing.name}}</option>
</select>
</div>
I have single select using AngularJs ng-options that is working good but my requirement is to make multiselect using AngularJs , How can i achieve that task using ng-options ?
main.html
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="originatingGroup" class="required col-md-4">Originating group:</label>
<div class="col-md-8" disable-control-point="CHALLENGES_EDIT">
<select
class="form-control"
name="OriginatingGrp"
id="OriginatingGrp"
ng-model="challengesDTO.originatingGrpLkupCode"
ng-options="OriginatingGroupOption.id as OriginatingGroupOption.text for OriginatingGroupOption in challengeGroupOptions">
<option value="">
Select...
</option>
</select>
</div>
</div>
</div>
Just add "multiple"
<select multiple
class="form-control"
name="OriginatingGrp"
id="OriginatingGrp"
ng-model="challengesDTO.originatingGrpLkupCode"
ng-options="OriginatingGroupOption.id as OriginatingGroupOption.text for OriginatingGroupOption in challengeGroupOptions">
<option value="">
Select...
</option>
</select>
challengesDTO.originatingGrpLkupCode must and will be an array