Set default value option with Angular ReactiveForm setValue method - javascript

I am trying to set default value of select option with Angular 7, but it doesnt set default option value;
Here what I tried to do.
At the component I am using setValue() method to set default value.
this.courseForm.controls['selectedTeacher'].setValue(this.course['Teacher'],{onlySelf: true});
And at the template I am using select like this:
<select formControlName="selectedTeacher">
<option *ngFor="let teacher of teachers" [ngValue]="teacher">
{{ teacher.FirstName }} {{teacher.LastName}}
</option>
</select>
Normally when try like this with input text it works but select list doesnt work.
I couldn't realize exactly what the problem is.
Help please,
Thanks

Angular uses objects reference, instead of properties, so if you do this, it will work if you have unique identifier for each teacher
const teacher = this.teachers.find(t=> t.id == this.course['Teacher'].id);
this.courseForm.controls['selectedTeacher'].setValue(teacher,{onlySelf: true});
Or you can find by any unique property
const teacher = this.teachers.find(t=> t.FirstName == this.course['Teacher'].FirstName && t.LastName == this.course['Teacher'].LastName );

change in your component:
this.courseForm.controls['selectedTeacher'].setValue(this.course['Teacher'].id,{onlySelf: true})
in your html:
<select formControlName="selectedTeacher">
<option *ngFor="let teacher of teachers" [value]="teacher.id">
{{ teacher.FirstName }} {{teacher.LastName}}
</option>
</select>

Related

Update value in select depending from other field in Angular 8

I'm trying to update the value in select in Angular 8.
I found that I can use:
$('#selectSeccion').val("SeccionOption");
This select is the next one:
<select name="seccion" class="form-control" id = "selectSeccion">
<option *ngFor="let seccion of seccion" [ngValue]="seccion">{{seccion.seccion}}</option>
</select>
jQuery code is not working when I use the select with Angular, only works when select is normal html like the next one:
<select class="form-control" id = "prueba">
<option value = ""></option>
<option value = "other">other</option>
</select>
How can I update the value on the "ng" select?
I would not recommend using jQuery along with Angular.
you can read more about it here: http://www.learnangularjs.net/using-jquery-with-angular.php
The simplest way
component.html:
<select [(ngModel)]="selectModel" (change)="selectionChange()">
<option [value]="seccion" *ngFor="let seccion of seccions"> {{seccion}}</option>
</select>
component.ts:
selectionChange() {
console.log(this.selectModel)
}
changing the selectModel parameter will trigger the select to change as well.
Based on previous recommendation I can updated using Angular, which always was the best way by the way. No jQuery. I have to change my select to the next one
<select name="seccion" class="form-control" id = "selectSeccion" [(ngModel)]="value" #ctrl="ngModel">
<option *ngFor="let seccion of seccion" >{{seccion.seccion}}</option>
</select>
Adding this on select tag > [(ngModel)]="value" #ctrl="ngModel" and updating the ts file with this lines:
value : string = '';
updatingFunction(){ this.value = "SeccionUpdated"; }
I left it if there someone needs it

aurelia.js print a value in my DOM from a select

my values are been printing in a alert, but how can I print this value in my DOM? like in a h1 tag?
app.html:
<template>
<select value.bind="changedValue" change.delegate="DropdownChanged(changedValue)">
<option model.bind="1">1</option>
<option model.bind="2">2</option>
<option model.bind="3">3</option>
<option model.bind="4">4</option>
</select>
</template>
app.js
export class App {
changedValue;
DropdownChanged(changedVal) {
alert(changedVal);
}
}
https://gist.run/?id=87f6897928feb504dad638d439caf92f
Your changedValue in App holds the model you select as I see it.
You just need to give it a default (and maybe a better name)
export class App {
value = 1;
Then update it when a different value is selected instead of alerting.
DropdownChanged(changedVal) {
this.value = changedVal;
}
Then you can freely use it in your template
<template>
<h1>${value}</h1>
...
As suggested, you might not need the change interceptor at all, in which case you can just bind to the select's model:
<select value.bind="selectedValue">
and
<h1>Selected Value: ${selectedValue}</h1>
(no need for any js code in this particular simplified example)

Angular2 - update select template from component

I have a select element in my component template that is hooked up a selectedEmp model.I want to be able to update the selectedEmp in the component and have the correct value show in the select element. My current setup is not letting this happen. Instead the select value does not display the selectedEmp. I console logged the selectedEmp, and its value is changing. I think this is because the option element is never set to any value when i do it via the component. Does anyone know a way to do this.
Component.html
<select name="sel1" class="form-control" (ngModelChange)="onChange($event.target.value)" [(ngModel)]="selectedEmp">
<option [value]="employee" *ngFor="let employee of employees">
{{employee}}
</option>
</select>
Component.ts
employees:Array<string> = ["Andrew","Allen","Kevin","Phil"];
visable:boolean = false;
selectedEmp:any = null;
constructor(){}
// Selection change
onChange(value:any):void {
console.log(value);
}
updateModel(){
this.selectedEmp = "Allen"
}
It's not quite clear from your question but I did see one error on your (ngModelChange) event binding, since the items are strings, $event.target.value fails try (ngModelChange)="onChange($event)".
But that was only for console anyway, so removing it leaves:
<button type="button" (click)="updateModel()">Select Allen</button>
<select name="sel1" [(ngModel)]="selectedEmp">
<option [value]="employee" *ngFor="let employee of employees">
{{employee}}
</option>
</select>

Angular model change isn't reflected to html select box

I have an html list with a form for defining filter values. In this form there is a select box:
<div style="...">
<label for="lstCategory">Category:</label><br/>
<select name="category" id="lstCategory" ng-model="category" ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
</select>
</div>
In my controller I bind the "categories" model to a REST resource:
.controller('AppointmentsHomeCtrl', [
...
function(
...
) {
$scope.location = typeof $location.search().location != 'undefined' ?
$location.search().location :
'0';
$scope.category = typeof $location.search().category != 'undefined' ?
$location.search().category :
'0';
$scope.categories = CategoriesResource.query();
Now I want to preselect a value in this select box, depending on the dearch parameter "location" in my url, which is done by the $scope.category = typeof $locati....... part of the code.
My problem is, that this preselection isn't reflected to my HTML while the mnodel itself has the correct value.
I already tryed to set the value after the query to the resource is done by watching the resource or giving a callback function to the "query" method but this also isn't working.
Did I missed something here? What is the correct way to solve this problem?
Edit:
It seems to recognise the options since:
$scope.category = "foo"; adds a pseudo option which gets selected.
But when I choose an existiong id, nothing happens at all:
$scope.category = "3";
at controller you can try this method for preselect value
$scope.precategory = '0'; //just for example value
then on your html code make sure ng-model having different variable with ng-repeat like this one
<select name="category" id="lstCategory" ng-model="precategory " ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
that method will help solve your problem, because i was getting same problem before :)
Instead of $scope.categories = CategoriesResource.query(); try:
CategoriesResource.query().then(function(result) {
$scope.categories = result;
});
You may have to tweak it a bit if the result is not an array...

Empty option as default select when ngoptions data is bound asynchronously

I have the ngoptions array bound asynchronously inside my controller. When I create a select with it, there is an empty option being created. How do I avoid?
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess"> </select>
My controller code
Employees.query(function(employees){
$scope.employees = employees
});
How do I avoid empty select being created? I tried ng-init but it didn't work
Solution
(1) You can create blank option. This will be selected by default.
$scope.order.employee = -1
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess">
<option value="-1">--Select--<option>
</select>
(2) You can select first option
Employees.query(function(employees){
$scope.employees = employees
$scope.order.employee = employees.length ? employee[0]._id : -1
});
That's because you didn't initialized your model.
You have to set a default value for your ng-model="order.employee" in your controller.
Like:
$scope.order.employee = -1
and your select should have this structure:
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess">
<option value="-1">Click to Select<option>
</select>

Categories

Resources