I am working on Angular4 i want to show the selected dropdown value in the left side on the same page. i want the output like when selecting a packing type value and press add button the selected value can be moved to the right side portion.
actually, I am new in angular. can anyone help please its a big help form me
my Html Code is
<form #newForm="ngForm" (ngSubmit)="OnSubmit(newForm.value);newForm.reset()">
<div class="form-group">
<label>Packing Type</label>
<select class="form-control" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
</select>
</div>
for add button
<input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newForm.value);newForm.reset()" />
</div>
this is my TS Component file
addItems(value: any) {
this.items = new IComboDetails(value.itemcode, value.itemdescription, value.PackingtypeName, value.quantity);
this.stockitems.push(this.items);
}
Here is working example
<select [(ngModel)]="myDropDown" (ngModelChange)="onChangeofmyOptions($event)">
<option value="one">One my value</option>
<option value="two">Two my value</option>
<option value="three">Three my value</option>
</select>
<input [hidden]="myDropDown !=='two'"type="text">
.ts
onChangeofOmyptions(newGov) {
console.log(newGov);
}
in your case
<select class="form-control" (ngModelChange)="onChangeofmyOptions($event)" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
</select>
onChangeofOptions(newGov) {
console.log(newGov);
this.myDropDown=newGov;
}
get value to right side
<input type="text" value={{myDropDown}}>
for binding
this.myDropDown=newGov;
Related
I am trying to set data in a database using dot net core, everything else inserts fine except when it is trying to pick up the data from an option menu.
Here is the code from the view(partially, because I don't think the whole code is necessary, if it is, please tell me I will upload it.)
What am I doing wrong?
Thanks in advance <3
` <label asp-for="Seizure">Seizure:</label>
<select asp-for="Seizure" name="seizures" id="seizures">
<option value="fixeddecorative">Fixed / decorative hatch</option>
<option value="functional">Functional hatch</option>
</select>
</div>
<div class="form-group">
<label asp-for="HatchTrap">Hatch trap:</label>
<select asp-for="HatchTrap" name="hatchtraps" id="hatchtraps">
<option value="nowindcatcher">No wind catcher</option>
<option value="modelA">Model A</option>
<option value="modelB">Model B</option>
<option value="modelC">Model C</option>
</select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>`
And here is the code of my controller:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("OrderId,Model,Color,Size,Seizure,HatchTrap,User")] ShutterOrders order)
{
if (ModelState.IsValid)
{
_context.Add(order);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Create));
}
return View(order);
}
The picked up values in the object:
Model binding looks through the sources for the name pattern prefix.property_name. If nothing is found, it looks for just property_name without the prefix.In your code,the name of the selectlist could not match the property in ShutterOrders model.
And you need know that asp-for will generate name and id html element by default.As a sample,if you use the following code:
<select asp-for="HatchTrap">
</select>
It will generate the html in the browser:
<select id="HatchTrap" name="HatchTrap">
</select>
So,to meet your requirement,just remove the name and id(id is optional,you could remove or keep it):
#model ShutterOrders
<form asp-action="Create">
//other properties...
<div class="form-group">
<label asp-for="Seizure">Seizure:</label>
<select asp-for="Seizure">
<option value="fixeddecorative">Fixed / decorative hatch</option>
<option value="functional">Functional hatch</option>
</select>
</div>
<div class="form-group">
<label asp-for="HatchTrap">Hatch trap:</label>
<select asp-for="HatchTrap">
<option value="nowindcatcher">No wind catcher</option>
<option value="modelA">Model A</option>
<option value="modelB">Model B</option>
<option value="modelC">Model C</option>
</select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
Result:
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 am trying to have a select drop down display the first option as a placeholder value
The following code works
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select>
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
however the following code does not
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select
[ngModel]="city">
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
which leads me to believe I am using the ngmodel incorrectly.
Can I have some guidance please.
It should be,
Change
From
<select [ngModel]="city">
To
<select [(ngModel)]="city">
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>
Html Code
<select class="form-control" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="">Please Select</option>
</select>
<button type="button" ng-click="btnSet();">Set Item</button>
Js Code
$scope.Register = {city: ''};
$scope.dtcmbCity = ['Delhi','Bombay','Chennai'];
$scope.btnSet= function () {
$scope.Register.city = "Delhi"
}
My problem is when load the form the data (delhi,bombay,chennai) displayed in the select box. and then i click the set button i want to set delhi into the selection box.
thanks please help
if you are looking for setting the value attribute in the options fields same as the text value than this can help you.
Your current code .
ng-options="item for item in dtcmbCity"
Result HTML.
<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="string:Delhi">Delhi</option>
<option label="Bombay" value="string:Bombay">Bombay</option>
<option label="Chennai" value="string:Chennai">Chennai</option>
</select>
if you use the track by in ng-options , html code is
ng-options="item for item in dtcmbCity track by item"
Result HTML.
<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity track by item">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="Delhi">Delhi</option>
<option label="Bombay" value="Bombay">Bombay</option>
<option label="Chennai" value="Chennai">Chennai</option>
</select>
Setting the value on button click is working fine.