I have the following HTML on my page, where I have 2 select elements. I want them both to be required. I want the second element currentModel to remain disabled until the first one is selected with a value other than Year, which is my default value.
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear" >
<option>Year</option>
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel">
<option>Model</option>
<option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>
Could somebody help me with how to validate the select elements like this?
All you need to use is ng-model and ng-options instead of manually creating options via ng-repeat. Let angular create options for you.
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear"
ng-options="year for year in years track by year">
<option value="">Year</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel"
ng-disabled="!currentYear"
ng-options ="model.niceName as model.name for model in models track by model.niceName">
<option value="">Model</option>
</select>
Plnkr
ng-options="year for year in years track by year" follows the syntax label for value in array
ng-options ="model.niceName as model.name for model in models track by model.niceName" follows the syntax select as label for value in array
Just set the ng-model for both the selects. In case of models since i used select as syntax (model.niceName as model.name) the currentModel will have niceName property of the selected item. if you remove select as part from the model it will have the respective model object.
set an ng-disabled on the 2nd select based on value of currentModel
since there is a track by bug with ng-select when dealing with objects we need to go with as syntax
ng-disabled="currentYear == -1" select your default value by doing $scope.currentYear = -1
This will make the second select box disabled if the currentYear model value is '-1'
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear" >
<option value="-1">Year</option>
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel"
ng-disabled="currentYear == 'Year'">
<option>Model</option>
<option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>
Here is Plunkr example: http://plnkr.co/edit/LIAqMq4TEz9xOCUGPAUs?p=preview
Related
Here I want to get a project from database to edit or change its properties for ex. destination country.
when the project is loaded the select element should be already selected same as the project.DestinationCountry. Then I may change this property if needed.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
I tried to use value="#project.DestinationCountry" within select element but it did not work.
Here is c# code
private ProjectModel project;
protected override void OnInitialized()
{
project = _db.GetProject<ProjectModel>(id);
}
This won't work since you can't add a value to the select element.
<select type="text" class="form-control" id="Destination" value="#project.DestinationCountry">
<option value="Canada">Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
However, to make an option selected by default you need to use the selected attribute on option. To make sure the select element shows the fetched value from database, the best bet would be to use conditionals. If project.DestinationCountry matches the value add the selected attribute.
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected>Canada</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
</select>
You can achieve this using conditional attributes
<select type="text" class="form-control" id="Destination">
<option value="Canada" selected="#(project.DestinationCountry == "Canada")">Canada</option>
<option value="Sweden" selected="#(project.DestinationCountry == "Sweden")">Sweden</option>
<option value="Switzerland" selected="#(project.DestinationCountry == "Switzerland")">Switzerland</option>
</select>
This checks whether the condition matches. If true then the value assigned is same as the attribute name thus resulting in selected="selected". When the value is false the attribute won't render at all. Or better use a for loop to output the options and for each entry you can check whether it's the current value and then add selected attribute to it to it.
I did like this and it worked but I want to know if there is smarter solution for that.
<select type="text" class="form-control" id="Destination">
<option value="">Select a country</option>
#foreach (var country in Countries)
{
if (project.DestinationCountry != null)
{
<option value="#country" selected=#(project.DestinationCountry.ToLower() ==
country.ToString().ToLower())>#country</option>
}
else
{
<option value="#country">#country</option>
}
}
</select>
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 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
<div class="form-group">
<label class="col-md-4 control-label" for="is_present">Is Present?</label>
<div class="col-md-4">
<select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === true">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
I have this code in my html component. I receive a boolean data from API, I would like to know what the best way to use *ngIf to add selected in option tag if the API data is true or false.
Slightly change to Rahul's answer, because from what I understand, you are receiving a boolean value that is should not be the same as candidates.is_present. Therefore store the boolean value to a variable, e.g bool, and then just have the [(ngModel)]="bool" in your select:
<select name="is_present" [(ngModel)]="bool" *ngIf="candidates.is_present">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Just use candidates.is_present
<select id="is_present" [(ngModel)]="defaultValue" name="is_present" class="form-control">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
and in TS file,
if(candidates.is_present){
this.defaultValue = 'Yes';
}else
{
this.defaultValue = 'No';
}
as i can understand from question you want to select the value in select box based on some candidates.is_present. So here you need to bind the data using [(ngModel)]="candidates.is_present" ,and be sure to include FormsModule in your imports. we use *ngIf when we want our element to remove/add to dom based on some conditions.hope you got the answer
<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>