I would remove the blank first option from a select ng-model and put instead the first value of an array.
Here is my code:
<div class="col-9">
<select ng-model="chooseOrg"
formControlName="orgTypeId"
class="editmodal-object">
<option [ngValue]="orgType.id" *ngFor="let orgType of allOrgType" style="text-transform:uppercase;">{{orgType.description}}</option>
</select>
</div>
My array has no blank value inside, but it's composed of 5 object. I just want the first one always the default value of my select.
Since you are using ngmodel you should have it changed when you change the formControlName. I think having both makes it not working properly. So remove ngmodel and rely on formControlName and check for changes and set chooseOrg that way.
Another good thing to know is that you can set the default value for new FormControl() by having the default value 1 for example in the method like this:
new FormControl(1)
I made a stackblitz for you to show you what I mean. https://stackblitz.com/edit/angular-ivy-klwglz?file=src/app/app.component.html
Related
I am trying to organize a drop down list that will display a single value to the user but will also pass back an array object upon changing the selection.
Currently I have an array called classificationresult that has 3 elements CLASSIFICATION_NAME, GROUP_ID, GROUP_NAME.
When a user selects a particular CLASSIFICATION_NAME I want to pass back the entire array result containing all 3 elements listed above.
Currently the code below works for everything EXCEPT showing the CLASSIFICATION_NAME in the drop-down box upon loading. It shows the list once you click, but it starts with a blank until it is clicked. Any way to fix this? I believe the display element is tied to [ngValue] but that is also what I am using to pass back the entire array versus just the one.
Any help would be greatly appreciated.
<p>Select Classification*</p>
<select [(ngModel)]="selectedClassification (ngModelChange)="changedClassification($event)">
<option *ngFor="let classificationresult of classificationresults" [ngValue]="classificationresult" >{{ classificationresult.CLASSIFICATION_NAME }}</option>
</select>
Summary -- I want my drop down list to always have a value shown to the user (value being the Classification Name) but when one is selected I want the entire array to pass to the changedClassification function. Also sometimes after a user selects from other drops down on this page they will also go blank, but if they are selected a second time they will populate.
If everything is working as you are expecting except the initial value being displayed, I wonder if you need a [compareWith] function. I don't know what your classificationresult model looks like, but if I had to take a guess, putting a [compareWith] function on your <select> element would fix the issue.
Here is an article explaining it a little more.
I made this Stackblitz as an example with using the [compareWith] function. In my demo I am using ReactiveForms, but the compareWith should still be the same.
For your code, it may look something like:
<p>Select Classification*</p>
<!-- add this [compareWith] -->
<select [compareWith]="myCompareFunc" [(ngModel)]="selectedClassification" (ngModelChange)="changedClassification($event)">
<option *ngFor="let classificationresult of classificationresults" [ngValue]="classificationresult" >{{ classificationresult.CLASSIFICATION_NAME }}</option>
</select>
In your .ts file:
export class YourComponent {
// all your component code..
/* compare function, change the logic to fit your needs */
myCompareFunc (classificationRes1: any, classificationRes2: any): boolean {
return classificationRes1 && classificationRes2
? classificationRes1.CLASSIFICATION_NAME === classificationRes2.CLASSIFICATION_NAME
: classificationRes1 === classificationRes2
}
}
If that doesn't fix your issue, you may need to post more of your .ts code and data models.
I am attempting to create a select in my Angular app based on a classificationsList array from the component. As of now, the view initiates with the first value already "selected", but validation marks it as an invalid response.
If I select the dropdown and choose the other option, it returns valid.
(before selection)
(after selecting)
But when I go back to select "Class 1" it registers as invalid again.
What I'm expecting this to do is have the default, empty option (like below), that disappears once a real option is selected. The difference between these two lists is that the classificationsList is dynamic, whereas the the department list is static.
In fact, I took the html block from the department list and just added the *ngFor piece. Can someone tell me what I'm doing incorrectly, here? The issue isn't strictly with the validation, however. The bigger issue is the fact that it defaults to the first value in the array instead of an empty value like Department. When I put an empty string into the first item of the array from the component side, it selects the empty value like it selects "Class 1" as you've seen.
The validation actually performs fine here, as the empty string is invalid, and the rest of the array items are valid. In this scenario, though, there is an empty string still available in the option.
<div><label for="titleClass">Title Classification</label></div>
<select name="titleClass" id="titleClass" ngModel required>
<option *ngFor="let class of classificationsList">{{class}}</option>
</select>
</div>
I got it! The functionality I was looking for required me to set a default value (unattached to the array). For this one, I set the default as null like below.
<div class="formBoxRows">
<div><label for="titleClass">Title Classification</label></div>
<select name="titleClass" id="titleClass" ngModel required>
<option *ngFor="let class of classificationsList" [value]=null>{{class}}</option>
</select>
</div>
<select [(ngModel)]="scheduleComment" class="form-control"
(change)="getSchedCommentsList($event)"
#sched="ngModel">
<option [ngValue]="null">Choose Schedule Comments</option>
<option *ngFor="let scheduleComment of scheduleComments"
[ngValue]="scheduleComment">{{scheduleComment}}</option>
</select>
I've tried using the [(ngModel)] capability to update a field with a new value assigned within a component (separate from the assignment made within the select '*ngFor="let scheduleComment of scheduleComments'" option).
However, the select box value seems impervious to any updates outside the of the initial selection. I've seen other examples using ngChangeForm as well but that doesn't seem to be applicable to this situation, unfortunately.
Can anyone provide an example of how this might be done? That is updating a value independently from the initial value selected.
Thanks
I have a scenario where i need to display options in dropdown with binded value and some text prefix to it
html:
<select ng-model="rounds" ng-change="fnTopRating(rounds)" class="col-xs-4" ng-options="rounds for rounds in [1,2,3,4]">
<option value=''>round wise</option>
<option>Round {{rounds}}</option>
</select>
but here i am not getting round 1,round 2... in drop down instead i am getting 1,2,3,4...
I am not clear with what is happening .
Any help is appreciated.
Well, at first your syntax is a bit wrong. I'd recommend you to check the docs.
To add a prefix in your options you should use single quotes, like this:
<select ng-model="rounds" ng-change="fnTopRating()" class="col-xs-4" ng-options="'round ' + r for r in [1,2,3,4]">
<option value label="round wise"></option>
</select>
Note: You just need to use $scope.rounds in your controller to get the selected item in fnTopRating() function, you don't need to pass it as parameter.
I have a select box.
When no value is selected, I have the empty option --. It's OK !
Once an option is selected, the empty option disappears.
But I would like that it is always there to have the opportunity to choose --.
Is it possible ?
<select ng-model="project" ng-options="act.id as act.name for act in actors"></select>
please see here:http://plnkr.co/edit/SWpRZA1dafNNva70z6KE?p=preview
<select ng-model="project" ng-options="act.id as act.name for act in actors">
<option value="">--<option>
</select>
ng-options gets priority when any option is selected from .
As per the standard html can contain . Thus the mentioned option gets priority as the selection is null.
And in view, html priority is higher, thus always value is seen unless the ng-option value already selected from controller.