I tried many things but didnt work.
how can i set first option of the data comes from Api. It chooses last option
<div class="form-group" [hidden]="!hideItem">
<p></p>
<select
class="form-select"
type="option"
id="optionFour"
formControlName="optionFour"
>
<option *ngFor="let option of lvlThreeOptions" [value]="option.id"
[selected]="lvlThreeOptions[0]">
{{ option.name }}
</option>
</select>
</div>
<div class="form-group" *ngIf="lvlThreeOptions?.length > 0">
<p></p>
<select
[(ngModel)]="selectedLvlThree"
class="form-select"
type="option"
id="optionFour"
formControlName="optionFour"
>
<option *ngFor="let option of lvlThreeOptions" [value]="option.id">
{{ option.name }}
</option>
</select>
</div>
option.component.html
this.optionService
.getOptionsById(this.selectedLvlTwo, 1)
.subscribe((response) => {
this.lvlThreeOptions = response.data;
console.log(this.lvlThreeOptions);
this.selectedLvlThree = this.lvlThreeOptions[0].id;
});
option.component.ts
that solved my problem
Related
I am using multiselect dropdown but not able to get old values(by using old('') in laravel blade)on submit.Please tell where i am doing wrong.Below i am sharing code.
<div class="form-group">
<label for="integration">Integration</label>
<div class="select2-purple">
<select id="integration" class="form-control form-select form-select-lg col-lg-12 select2" multiple="multiple" aria-label=".form-select-lg example" data-dropdown-css-class="select2-purple" name="integration[]">
<option value=''>Select Integration</option>
#foreach($integartion as $integartions)
<option value="{{ $integartions->ecom_channel }}" #if(isset($company) && in_array($integartions->ecom_channel, $CmpIntegartion) ) selected #endif>{{ $integartions->ecom_channel }}</option>
#endforeach
</select>
#if ($errors->has('integration'))
<span class="text-danger">{{ $errors->first('integration') }}</span>
#endif
</div>
</div>
<select name="integration[]">
<option value=''>Select Integration</option>
#foreach($integartion as $integartions)
<option value="{{ $integartions->ecom_channel }}" #if(old('integration') && is_array(old('integration')) && in_array($integartions->ecom_channel, old('integration')) selected #endif>{{ $integartions-> ecom_channel}}</option>
#endforeach
</select >
Your data will be stored like this in old:
integration[0] = somevalue,
integration[1] = somevalue
So you first check if your old('integration') is not null,
then you check if its an array, then you check if the current item of loop exists inside that array!!
I needed to set a value for < select>
so I added a "value=.." to the element thinking that it will give it a default value.
Is there any way other than selected to use, because in my case the value changes from a candidate to an other.
I did this so the user can see first the candidate's service then change it in case of an error..
<span >Service</span>
<select class="form-control item pb-2" name="service" value={{ $candidate->service->service_name }}>
<option value="Outsourcing"> <span class="font-weight-bold">Outsourcing</span></option>
<option value="Developpement"> <span class="font-weight-bold">Developpement</span></option>
<option value="Call center"> <span class="font-weight-bold">Call center</span></option>
</select>
You cannot set a default value for select. Instead, you can do something like this:
<select class="form-control item pb-2" name="service" >
<option value={{ $candidate->service->service_name }}>{{ $candidate->service->service_name }}</option>
<option value="Outsourcing"> <span class="font-weight-bold">Outsourcing</span></option>
<option value="Developpement"> <span class="font-weight-bold">Developpement</span></option>
<option value="Call center"> <span class="font-weight-bold">Call center</span></option>
</select>
Any option can be set to selected and that will be the default value for the select. That is the standard way of setting the value. Why not use it?
Also options do not have tags inside
<select class="form-control item pb-2" name="service" >
<option selected value="{{ $candidate->service->service_name }}">{{ $candidate->service->service_name }}</option>
<option value="Outsourcing">Outsourcing</option>
<option value="Development">Development</option>
<option value="Call center">Call center</option>
</select>
If you must insert a new option and select it then you can use JavaScript
window.addEventListener("load",function() {
const sel = document.querySelector("[name=service]");
const val = "{{ $candidate->service->service_name }}";
const opts = [new Option(val,val),...sel.options]
sel.length = 0;
opts.forEach(opt => sel.appendChild(opt));
sel.value = val;
})
<span>Service</span>
<select class="form-control item pb-2" name="service">
<option value="Outsourcing">Outsourcing</span></option>
<option value="Development">Development</option>
<option value="Call center">Call center</option>
</select>
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
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>