I have a menu page & I have few options. When I click any option, the page should redirect to a login page. Where in the login page, I have a select drop down which contains 4 options. Based on the menu selection, I need to display option which should be the default selected. That is if I click on supplier option in the menu, I need to display supplier option selected in the login page.
<a [routerLink]="['/login', {'params': 2}]"> Go </a>
So I'm just passing a parameter in URL & based on this I'm trying to select an option in the login page.
<select name="role" class="form-control input-xs input-sm input-md" [(ngModel)]="role">
<option *ngIf="{"params":"2"}" value="" disabled>Login as</option>
<option *ngIf="{"params":"3"}" value="1" selected="selected" >Supplier</option>
<option *ngIf="{"params":"4"}" value="2" selected="selected">Customer</option>
<option *ngIf="{"params":"5"}" value="3" selected="selected">OEM</option>
</select>
I'm not getting my expected result. Can somebody help me with this?
Your question is so general but I mention a sample answer. I hope it can help you.
In select tag, if you want to set a value as default you should set selected="selected" for it but in angular, you can use it as dynamic and bind it to a variable like [selected]="something === true".
If you write something like below i.e
<select name="role" class="form-control input-xs input-sm input-md">
<option value="" [selected]="myUrl === 'Login'">Login as</option>
<option value="1" [selected]="myUrl === 'TSP'">TSP</option>
<option value="2" [selected]="myUrl === 'Telemarketer'">Telemarketer</option>
<option value="3" [selected]="myUrl === 'TRAI'">TRAI</option>
</select>
Then declare myUrl in your typescript file public myUrl: string;
Now just set myUrl value to each route you would like its name to be the default.
See also Stackblitz
If the below code order status is equal then selected same will displayed in drop down.
{{ordsts.statusName}}
Related
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().
I have a dropdown and I want to detect all the events, even if they are the same, when custom period is selected a modal is displayed, but I need that the user be able to use this modal all the times he want, even if is selected, here is the code:
<div class="form-group">
<select width="'100%'" ng-model="selection.date.mode"
class="form-control input-sm" ng-change="setDateMode()">
<option value="d" ng-show="visible.date.d" >Day</option>
<option value="w" ng-show="visible.date.d" >Week</option>
<option value="m" ng-show="visible.date.d" >Month</option>
<option value="y" ng-show="visible.date.d">Year to Date</option>
<option value="c" ng-show="visible.date.d" >Custom</option>
<option value="l" ng-show="visible.date.d" >Last 30 days</option>
</select>
AngularJS function:
function setDateMode() {
$scope.selection.date.mode === "c" ? clickCustomInput() : dateSelected();
}
Basically you should think twice whether you really need this. You can only achieve it by adding a click-directive to each option:
<option value="d" ng-show="visible.date.d" ng-click="setDateMode()">Day</option>
This will cause double calls of setDateMode() with each selection except the selected value stays the same. But you can‘t remove ng-change() from the select-element because when ng-click() fires the dropdown list doesn‘t know the currently selected value yet...
<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>
<select name="status" required>
<option selected disabled>status</option>
I have set required attribute in html select.
My first option set selected disabled for display text.
However it will cause required attribute not working.
anyone know how to solve this problem?
Set <option>'s value to empty string ('').
Updated Code
<select name="status" required>
<option selected disabled value="">status</option>
<!-- Additional options here (at least one should not be disabled) -->
</select>
Explanation
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input → raising the required message.
More info (w3schools)
The value attribute specifies the value to be sent to a server when a form is submitted.
Example
document.querySelector('form').onsubmit = (e) => {
e.preventDefault();
const status = e.target[0].value;
console.log(`Your status is: "${status}"`);
}
<form>
<select name="status" required>
<option selected disabled value="">Select a status...</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
<input type="submit" value="Submit">
</form>
Here are two different datalist one with patient filenumber other with state
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>pc123</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
When you open drop down menu for both you will notice input for patient show value & innerHTML both and inverted(on clicking it enters value inside input field). And in State input it just simply show state
What's the reason of these different behaviors?
I want to input to show just innerHTML of option like state input and have different data in value & innerHTML
While I cannot answer your exact question, I.E. "What is the reason of this", I can tell you why it happens.
As a result of the intended functionality of the program running the code (whichever web browser you're running) the .innerHTML attribute is shown to the right of the option element only if the .innerHTML value and the .value value differ.
Here is a fiddle showing this in action, I've changed the first option to have the same .innerHTML value and .value value as an example: https://jsfiddle.net/87h3bcwd/
Further Reading on the Datalist Element that I found useful in answering this question: http://www.w3.org/TR/html5/forms.html#the-datalist-element
Code:
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>49</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
Using <datalist> doesn't work like <select>. It always displays the value attribute and doesn't let you change it by default.
This answer shows how to display different text if you need to - it consists of using a data- attribute and processing it with JavaScript:
Show datalist labels but submit the actual value