I wanted to bind a select element values to array RelatedComponentIDs:
<select class="form-control form-control-sm" formControlName="RelatedComponentIDs">
<option [ngValue]="null"></option>
<option [ngValue]="type.Value" *ngFor="let type of allComponents">{{ type.Name }}</option>
</select>
this.form= this.formBuilder.group({
RelatedComponentIDs: [[]],
});
When I am selecting any value in select, it is mapping to RelatedComponentIDs but as a string not as a array.
I wanted it to return to array.
Any help?
Thanks.
Related
I have three select options in my html page. Based on the three selecting values I need to write a value in another text box.
<select (change)="aaFilter($event.target.value)" class="form-control">
<option *ngFor="let type of aa" [value]="type.value">
{{type.display}}
</option>
</select>
<select (change)="bbFilter($event.target.value)" class="form-control">
<option *ngFor="let type of bb" [value]="type.value">
{{type.display}}
</option>
</select>
<select (change)="ccFilter($event.target.value)" class="form-control">
<option *ngFor="let type of cc" [value]="type.value">
{{type.display}}
</option>
</select>
So I have Onchange function in every select box. Now In my typescript file my
aaFilter(selectedaa:string){
console.log('value is ',selectedaa);
}
Likewise I have written three functions. But based on this values I need to set up a value in textbox.
headerName(){
//Here I need to take up the threee selected values from drop down & do some function based on that.
}
How can that be done in angular 6 & typescript?
In component:
Public selectedValues = [];
aaFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}
bbFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}
ccFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}
updateModelInput(){
if(this.selectedValues.length === 3){
// UPDATE THE VALUE IN TEXT BOX
}
}
From Template, you can pass value 0, 1, 2 as 2nd parameter in change method.
Well, you haven't bound anything to the select options have you?
<select
[(ngModel)] ="filterA"
(change) ="headerName()"
class ="form-control">
<option *ngFor="let type of aa" [value]="type.value">
{{type.display}}
</option>
</select>
<select
[(ngModel)] ="filterB"
(change) ="headerName()"
class ="form-control">
<option *ngFor ="let type of bb" [value]="type.value">
{{type.display}}
</option>
</select>
<select
[(ngModel)] ="filterC"
(change) ="headerName()"
class ="form-control">
<option *ngFor="let type of cc" [value]="type.value">
{{type.display}}
</option>
</select>
In your component file:
headerName()
{
/* Do whatever this function is supposed to do whenever one of the
filters is changed. The variables filterA, filterB and filterC will
now always have the most recent values for you to operate on */
}
I have a select field that populates data as below. I populate data items as their names. My goal is to select data's name and their corresponded ids.
Here is my HTML template:
<select class="custom-select d-block w-100" id="test" [(ngModel)]="record.firstName" #firstName="ngModel" name="firstName">
<option value="">Choose...</option>
<option *ngFor="let item of items" value="{{ item.name}}">{{ item.name }}</option>
</select>
When I select an item from the dropdown, record.firstName is set to item.name as expected. I was wondering how can I also retrieve item.id when I select the same item. I couldn't find a resource or tutorials to fix this. Any help will be appreciated!
Instead of setting the option values to item.name, you can set them to the item objects with [ngValue]. That will allow you to access any property of the selected item. If necessary, you can handle the ngModelChange event to do additional processing.
<select [(ngModel)]="selectedItem" (ngModelChange)="processSelectedItem($event)" ...>
<option [ngValue]="undefined">Choose...</option>
<option *ngFor="let item of items" [ngValue]="item">{{ item.name }}</option>
</select>
As an example, you could set record to a modified version of the selected item with:
processSelectedItem(item) {
this.record.firstName = item.name;
this.record.item_id = item.id;
}
Alternatively, you could bind the options to item.id (I assume that the id is unique), and set the record.firstName in the ngModelChange event handler:
<select [(ngModel)]="record.item_id" (ngModelChange)="processSelectedItem($event)" ...>
<option value="-1">Choose...</option>
<option *ngFor="let item of items" [value]="item.id">{{ item.name }}</option>
</select>
with:
processSelectedItem(itemId) {
this.record.firstName = this.items.find(x => x.id === itemId).name;
}
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
vatCodeList is an error with string codes.
Example: ['34u' , '23' ,'tt']
Need to set the selected value there .
<select class="custom-select" formControlName="vatCode">
<option *ngFor="let i of vatCodeList">{{i}}</option>
</select>
Inside your *.component.ts
public vatCode: any;
Inside your *.component.ts you can set the value of vatCode to one of the values contained within vatCodeList, this will update the selected value.
Inside the *.component.html
<select class="custom-select" formControlName="vatCode" [(ngModel)]="vatCode">
<option *ngFor="let i of vatCodeList">{{i}}</option>
</select>
You can bind the value property like this
<option [value]="i" *ngFor="let i of vatCodeList">{{ i }}</option>
You can try to put an expression to the option tag to make an option selected
<select class="custom-select" formControlName="vatCode">
<option *ngFor="let i of vatCodeList" {{i == vatCode?'selected':'' }}>{{i}}</option>
</select>
The variable should reference the value of the InputControl. Using reactive forms it would be easy to extract the value and put it into expression.
The easiest way to bind the element to the model with ngModel but you can check if this solution helps.
<select (change)="setOrg($event.target.value)" class="form-control">
<option value="" selected>Org</option>
<option *ngFor="let org of orgs" value="{{org}}">{{org}}</option>
</select>
and the function is like this :-
setOrg(val) {console.log(val); }
When I select the 'Org' option, it should print an empty string (""), but it is printing 'Org' itself.
What's the issue here ?