I am trying to dynamically set FormControlNames for select lists in a Reactive form but instead of formControlName, I'm getting ng-reflect-name.
My html code is as follows and I set the formControlName and ID on my select lists to the same value just for confirmation:
<div *ngFor="let questionOption of questionOptions; let i = index">
<select [id]="questionOption['control']" [formControlName]="questionOption['control']">
<option *ngFor="let option of questionOption['options']"> {{ option }} </option>
</select>
</div>
And this image shows ng-reflect-name being output inplace of the expected formControlName:
What can I try to resolve this?
UPDATE:
I have also found that my select lists do not reflect my selected option.
All my options are visible when I click on my list, I select my desired option but the displayed option remains unchanged.
However, when the form is submitted my console output displays my selected option.
The following image shows 2 select lists on the right which I had selected different options and submitted the form.
The console output on the left show the selected and submitted values.
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 have a model containing users, I want to make a dropdown list with these users' UserName as display and their IDs as values, but it is not working. Whichever user I choose from the dropdown list, when I proceed, the chosen value seems to be the Id of the current user, no matter which I choose.
When replacing this select with an input box the other part which uses the user Id works just fine. It seems as all value attributes for the options become the current user's Id instead of the chosen ones.
I've tried injecting javascript, I've tried changing the value=Item.Id for other things, nothing so far has worked. The dropdown list does become populated, but the value attribute seems to be off somehow.
<select asp-for="Input.UserID" onfocus="this.select()">
#foreach (var item in Model.Users)
{
<option value=Item.Id>#Html.DisplayFor(modelItem => item.UserName)</option>
}
</select>
The webpage always throws an error stating that the chosen User ID is the one of the currently logged in user.
You aren't setting the value="" attribute of the <option> element correctly. You also don't need to use DisplayFor for a string value.
<select asp-for="Input.UserID">
#foreach( var item in this.Model.Users ) {
<option value="#(item.Id)">#(item.UserName)</option>
}
</select>
That said, consider using this instead:
<select asp-for="Input.UserID" asp-items="#this.Model.UsersOptions"></select>
You'll need to add a List<SelectListItem> UsersOptions to your ViewModel for this to work.
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>
I have a page where I need to set the option in a dropdown to a value from my model. I am trying to populate the existing selected option (made when the record was created).
<select name="assemblyOptions"
ng-model="model.edit.assembly"
ng-options="option as option.name for option in assemblyOptions">
</select>
This is how the code looked when I created the record. "assemblyOptions" is an object in scope that has the options to display.
When one is selected it is written to the $scope.model.edit.assembly of which "name" is the item displayed (hence "option as option.name for" ...).
Now, I am on a different page and I have the model data including the model.edit.assembly object.
I want the dropdown to be set to the value in the model.
I have tried using the ng-selected directive but can't get the syntax right.
Any possible solutions?
You can use track by to make the options unique
<select name="assemblyOptions"
ng-model="model.edit.assembly"
ng-options="option as option.name for option in assemblyOptions track by option.name">
</select>
I hope there's a way to achieve this.
I am creating dropdowns using ng-repeat; the number of dropdowns created depends on the data I retrieve from the database.
Depending on the data,I'd like to set an initial option value for each dropdown.
Consider the following code:
<span class="finds" ng-model="cond" ng-repeat="condin list">
<select ng-model="selected_item" ng-options="condition.name for condition in conditionTypes"></select>
<input ng-model="cond.name"/>
</span>
I can change the values of the dropdown by changing the selected_item value but this changes the value of all dropdowns (because the variable is binded).
So is it possible for me to change the value of each dropdown independently without affecting other dropdowns(without creating multiple variables as well)?
Thank you
If you want your right drop-down to be filled with appropriate data according to the value in your first select box you should be doing something like this.
Suppose you have two drop-down list like;
<select ng-model="first" class="form-control" ng-change="secondcall()">
<option ng-repeat = "firstdata in firstdatas" value="{{firstdata}}">{{firstdata}}</option>
</select>
<select ng-model="second" class="form-control">
<option ng-repeat = "seconddata in seconddatas" value="{{seconddata}}">{{seconddata}}</option>
</select>
In your controller;
$scope.secondcall = function () {
var value = $scope.first;
//Make an API call to fetch details with the select value and in the success do this
$scope.seconddatas = data from the api;
};
There's only one ng-repeat and that is used to create a set of dropdowns.
I need to retrieve the data from the database and depending on the data I can then define how many dropdowns I will need.
the ng-repeat does that. if, after processing the data I need 2 dropdowns then I'll create two pairs inside the loop
dropdown1 dropdwon1.0 {1.0 should load list depending on the option chosen in 1
dropdown2 dropdown2.0 {2.0 should load list depending on the option chosen in 2