<select class="custom-select rounded-0" id="exampleSelectRounded0" name="kode_poli">
#foreach ($polikliniks as $poliklinik)
<option value="{{$poliklinik->id}}">{{$poliklinik->kode_poli}} | {{$poliklinik->nama_poli}}</option>
#endforeach
</select>
My select option value will return a first id of poliklinik table
How to set select option 'selected' with another value in poliklinik table with my selected value when i insert before?
You will need to write an option with the selected id as the value and selected name in between the option tag
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="kode_poli">
<option value="{{$selected->id}}">{{$selected->kode_poli}}</option>
#foreach ($polikliniks as $poliklinik)
<option value="{{$poliklinik->id}}">{{$poliklinik->kode_poli}}</option>
#endforeach
</select>
Note: substitute the selected with the model you used in saving it
Related
I am using the below code to create a select field . Here the value is getting updated to the ngmodel . I also want to get the name of the option to store in another field
ie: Value in one field (ID) and name in another field (Selected value) .
Is there any way to achieve this .?
( <select name="ORG_ID" #ORG_ID="ngModel" [(ngModel)]="siteuses.ORG_ID" class="form-control"
[class.is-invalid]="!isValid && (siteuses.ORG_ID==''|| siteuses.ORG_ID==null)">
<option *ngFor="let item of this.sharedService.l_operating_units_s" value="{{item.BU_ID}}">{{item.NAME}}
</option>
</select>
)
you can use a getter
get nameOperating()
{
operating=this.sharedService.l_operating_units_s
.find(x=>x.BU_ID==siteuses.ORG_ID);
return operating?operating.NAME:null;
}
or store the full item selected using [ngValue] in the options
<select name="ORG_ID" #ORG_ID="ngModel" [(ngModel)]="site" class="form-control">
<option *ngFor="let item of this.sharedService.l_operating_units_s"
[ngValue]="item">{{item.NAME}}
</option>
</select>
<!--just for check-->
{{site.NAME}}{{site.BU_ID}}
In "site" you has the full selected, so in site.NAME you has the name, and in site.BU_ID you has the ID
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.
Iam trying to edit student details.
iam fetch values from database. blood group fetch from database to display select box. and also display other blood groups in same select box.
select class="form-control" name="studbldgrp" id="studbldgrp">
option value="{{$student->studbldgrp}}">{{$student->studbldgrp}}</option>
option value="O+ve">O+ve</option>
option value="O-ve">O-ve</option>
<option value="A+ve">A+ve</option>
<option value="A-ve">A-ve</option>
<option value="B+ve">B+ve</option>
<option value="B-ve">B-ve</option>
<option value="AB+ve">AB+ve</option>
<option value="AB-ve">AB-ve</option>
<option value="Other">Other</option>
</select>
my problem is if im fetch value is A+ ,and display in select box. but it also in option value field.
i no need to again this value(A+)A +ve in select option field.
how to disable this field???
Create an array of your groups. Than iterate over it and don't print value matches $student->studbldgrp.
Array in php:
$groups = array(
'O+ve',
'O-ve',
'A+ve',
'A-ve',
'B+ve',
'B-ve',
'AB+ve',
'AB-ve',
'Other'
);
Blade template:
<select class="form-control" name="studbldgrp" id="studbldgrp">
<option value="{{$student->studbldgrp}}">{{$student->studbldgrp}}</option>
#foreach ($groups as $group)
#if ($group != $struden->studbldgrp)
<option value="{{ $group }}">{{ $group }}</option>
#endif
#endforeach
</select>
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