I Have an option list of category to select the category of a book. when i try with observable the option list become empty,but if i try with array it is working fine without any problem.Why it is happening.Is the observable is not suitable for option list.
the below code does not work as we expected!
category$: Observable<categoryModel[]>;
<div class="form-group">
<label for="option-role">Category:</label>
<select class="form-control form-control-sm" id="options" formControlName="category" required
[ngClass]="{'is-invalid':submitted && f.category.errors}">
<option value="" disabled>select</option>
<option *ngFor="let category of category$ | async" [ngValue]="category ">{{category ?.name}}</option>
</select>
<div *ngIf="submitted && f.category.errors" class="invalid-feedback">
<div *ngIf="f.category.errors.required">Please select atleast one Category</div>
</div>
</div>
but if i try the same code with a plain category Array it is working with out any problem.The below code is working with out any problem
category$:Observable<categoryModel[]>;
this.category$.subscribe(category=>{
this.categoryArray=category;});
<div class="form-group">
<label for="option-role">Category:</label>
<select class="form-control form-control-sm" id="options" formControlName="category" required
[ngClass]="{'is-invalid':submitted && f.category.errors}">
<option value="" disabled>select</option>
<option *ngFor="let category of categoryArray" [ngValue]="category ">{{category ?.name}}</option>
</select>
<div *ngIf="submitted && f.category.errors" class="invalid-feedback">
<div *ngIf="f.category.errors.required">Please select atleast one Category</div>
</div>
</div>
Related
<div class="form-group">
<div class="controls">
<label class="required" asp-for="Designation"></label> <span class="danger" asp-validation-for="Designation"></span>
<select id="Designation" name="Designation" class="form-control" asp-for="Designation" required>
<option value="0" selected>Please select a Designation</option>
#foreach (var item in designation list)
{<option value="#item.DesignationName">#item.DesignationName</option>
}
</select></div>
this is my html drop down where designation list fetch the data of all employee which works fine
MY PROBLEM is that the I put required in select statement for validation and which doesn't work as it do not shows any message when field is not filled .How can I solve this
I need when No designation is selected it shows field required message on form
Try using an empty value in the first tag, since required works on empty elements. You may refer to the documentation if needed.
<div class="form-group">
<div class="controls">
<label class="required" asp-for="Designation"></label>
<span class="danger" asp-validation-for="Designation"></span>
<select id="Designation" name="Designation" class="form-control" asp-for="Designation" required>
<option value="" selected>Please select a Designation</option>
#foreach (var item in designation list)
{
<option value="#item.DesignationName">#item.DesignationName</option>
}
</select>
</div>
</div>
whenever I use [(ngModel)] first value becomes empty. but when I remove [(ngModel)] it is working fine.
<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" placeholder="Select Campaign" (change)="hitApiFunction(campaignInfo)">
<option value="" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData">
{{campData.campaign_name}}
</option>
</select>
By #Krishna Rathore
You can use [value]="" selected hidden
I have create a demo on Stackblitz
<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
<div class="form-group row">
<div class="col-xl-4 col-lg-6 col-md-12">
<fieldset class="form-group">
<label for="customSelect">Categories:</label>
<select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required placeholder="d.ff">
<option hidden [value]="" selected>Select one category </option>
<option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
</select>
</fieldset>
</div>
</div>
<button type="submit" class="btn btn-raised btn-danger">Save</button>
</form>
thank you everyone who tried to give an answer... its working fine now, correct ans is....
<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" (change)="hitApiFunction(campaignInfo)">
<option [value]="0" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData">
{{campData.campaign_name}}
</option>
</select>
and in ts file
campaignInfo=0;
Try to assign the campaignInfo variable with the placeholder text in your component.ts file.
e.g
export class CampaignComponent{
campaignInfo : any = "";
}
the reason behind such behavior of the placeholder being empty is you are adding ngModel in your dropdown and it is not assign with any text yet.
It will work for you because you have option tag value attribute as = ' ' for option Select Campaign thats why assign empty string for campaignInfo variable.
I'm working on my first angular project. I created a form where the user can choose from a dropdown list. I added an option on each drop down to choose "other" and type in a textbox.
This creates a situation where the user could choose values from the dropdown and use the textbox at the same time. I have a function on my submit button where I need to store the values that the user is passing.
The problem I'm having is that if the user selected from the dropdown, the value is an ID value but the textbox returns a name. Also, I'm not sure how to handle the values because my backend API is expecting four text values. If the user has two dropdown entries and two textbox entries, what's a good way to get the right values to the API?
I thought about passing every possible value into the function but I'm not sure what sort of logic I could add to only get the 4 values I need.
<div class="form-group">
<label class="control-label" for="Country">Category:</label><!--<input type="text" #category (change)="CountryTextAreaFilled(category.value)">-->
<select *ngIf="getCountryss()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($event.target.value)" class="form-control input-lg" id="Country">
<option value="0">Select Country</option>
<option *ngFor="let Country of getCountryss()" value= {{Country.id}}>{{Country.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedCountry == 'others'">
<label for="name">Enter Category:</label>
<input type="text" #category class="form-control" [(ngModel)] = "userCategory" (change)="CountryTextAreaFilled(userCategory)">
</div>
<div class="form-group">
<label class="control-label" for="ProviderType">Type:</label>
<select *ngIf="type" [(ngModel)]="selectedType" (change)="onSelectProviderType($event.target.value)" class="form-control input-lg" id="type">
<option value="0">Select Type</option>
<option *ngFor="let type of type" value= {{type.id}}>{{type.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedType == 'others'">
<label for="name">Enter Type:</label>
<input type="text" #type class="form-control" [(ngModel)] = "userType" [disabled]="providerInputStatus" (change)="CountryTextAreaFilled(userType)">
</div>
<div class="form-group">
<label class="control-label" for="State">State:</label>
<select *ngIf="type" [(ngModel)]="selectedState" (change)="onSelectState($event.target.value)" class="form-control input-lg" id="State">
<option value="0">Select Classifcation</option>
<option *ngFor="let State of State" value= {{State.id}}>{{State.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedState == 'others'">
<label for="name">Enter State:</label>
<input type="text" #State class="form-control" [(ngModel)] = "userState" [disabled]="categoryInputStatus" (change)="CountryTextAreaFilled(userState)">
</div>
<div class="form-group">
<label class="control-label" for="Location">Location:</label>
<select [(ngModel)]="selectedLocation" class="form-control input-lg" id="Location">
<option value="0">Select Location</option>
<option *ngFor="let Location of Location" value= {{Location.id}}>{{Location.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedLocation == 'others'">
<label for="name">Enter Location:</label>
<input type="text" #Location class="form-control" [(ngModel)] = "userLocation" [disabled]="specializationInputStatus" (change)="CountryTextAreaFilled(userState)">
</div>
<button type="submit" class="btn btn-success" (click)="saveCountry(userCategory, userType, userState, userLocation, selectedCountry, selectedType, selectedState, selectedLocation)">Submit</button>
<br>
<h3 *ngIf = "isAdded" >{{confirmationString}}</h3>
<a routerLink = "/angular"> < back</a>
Your question is a little ambiguous but I will try to help you out.
If your server is expecting String/text values then you need to handle it in the frontend and send it what it expects. So you should have to set logic to transform to string your numeric the function:
saveCountry(userCategory, userType, userState, userLocation, selectedCountry, selectedType, selectedState, selectedLocation) {
if(selectedCountry!=='others') {
selectedCountry = selectedCountry.toString();
} else {
selectedCountry = userState;
}
and so on for the rest of values.
To get the string value you have to set it in the value of the option element and then that value will be assigned to the selectedCountry model when selecting it from the dropdown:
<select *ngIf="getCountryss()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($event.target.value)" class="form-control input-lg" id="Country">
<option value="0">Select Country</option>
<option *ngFor="let Country of getCountryss()" value="{{Country.name}}">{{Country.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
Now you will have access to that country string in your saveCountry(...) function.
Year dropdown isnt showing option 3 or 4-
I want to show the Year drop down according to the course selected.
Here is the code-
<div class="form-group">
<label for="course">Course:</label>
<select class="form-control" id="course" ngModel name="course" #name required>
<option *ngFor="let course of courses" [value]="course">{{course}}</option>
</select>
</div>
<div class="form-group">
<label for="year">Year:</label>
<select class="form-control" id="year" ngModel name="year" required [ngSwitch]="course">
<option>1</option>
<option>2</option>
<option *ngSwitchCase="'MCA'">3</option>
<option *ngSwitchCase="'B. Tech'">4</option>
</select>
</div>
In component.ts the following array is present-
courses = ['B. Tech', 'M. Tech', 'MBA', 'MCA', 'PGDM'];
ngSwitch is working properly, the only thing you need to change is the binding of the variable to ngModel in the first select tag
like : [(ngModel)]="course"
<div class="form-group">
<label for="course">Course:</label>
<select class="form-control" id="course" [(ngModel)]="course" name="course" #name required>
<option *ngFor="let course of courses" [value]="course">{{course}}</option>
</select>
</div>
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>