<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>
Related
I'm working on a Razor Page and I need to implemtent my CreateDto in the HTML side.
I have already done it with a Enum class but now with the gernic list I don't know how.
<div class="form-group">
<label asp-for="Crt.Job" class="control-label"></label>
<select asp-for="Crt.Job"
class="form-control"
asp-items="Html.GetEnumSelectList<Jobtitler>()">
<option>Select type ...</option>
</select>
<span asp-validation-for="Crt.Job" class="text-danger"></span>
</div>
the line " Html.GetEnumSlectList() " is where I tried to implement
my prop = public list from the class called dto
<div class="form-group">
<label asp-for="Crt.Job" class="control-label"></label>
<select asp-for="Crt.Job"
class="form-control"
`I TRIED THIS` asp-items="Html.GetEnumSelectList<Projekt>()">
<option>Select type ...</option>
</select>
<span asp-validation-for="Crt.Job" class="text-danger"></span>
</div>
BUT THAT WILL NOT WORK
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>
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 am working on a Classic ASP page.
Earlier there was a checkbox list in the page which I have changed to a multi select listbox. Now after I changed it to multi select listbox the selected values are not getting saved into the database which was saving when it was a checkbox list.
The below is code from my html page....
<div class="fields options secondary-category">
<legend>Secondary Category</legend>
<p class="description">You may select up to two secondary categories in which you would like to be considered for an award (please hold the control key to select two categories).</p>
<select id="AwardsSecondaryCatagory" class="input-listbox" type="listbox" name="AwardsSecondaryCatagory" multiple="multiple" size="5">
<option>Select an option</option>
<option name="financialexcellence" value="Financial Excellence">Financial Excellence</option>
<option name="operationalexcellence" value="Operational Excellence">Operational Excellence</option>
<option name="employeeexcellence" value="Employee Excellence">Employee Excellence</option>
<option name="customerexcellence" value="Customer Excellence">Customer Excellence</option>
<option name="Innovation" value="Innovation">Innovation</option>
<option name="Transformation" value="Transformation">Transformation</option>
</select>
<!--
<div class="field opt">
<input id="financialexcellence" class="input-checkbox" type="checkbox" value="Financial Excellence" name="financialexcellence">
<label for="financialexcellence">Financial Excellence</label>
</div>
<div class="field opt">
<input id="operationalexcellence" class="input-checkbox" type="checkbox" value="Opertional Excellence" name="operationalexcellence">
<label for="operationalexcellence">Operational Excellence</label>
</div>
<div class="field opt">
<input id="employeeexcellence" class="input-checkbox" type="checkbox" value="Employee Execellence" name="employeeexcellence">
<label for="employeeexcellence">Employee Excellence</label>
</div>
<div class="field opt">
<input id="customerexcellence" class="input-checkbox" type="checkbox" value="Customer Excellence" name="customerexcellence">
<label for="customerexcellence">Customer Excellence</label>
</div>
<div class="field opt">
<input id="Innovation" class="input-checkbox" type="checkbox" value="Innovation" name="Innovation">
<label for="Innovation">Innovation</label>
</div>
<div class="field opt">
<input id="Transformation" class="input-checkbox" type="checkbox" value="Transformation" name="Transformation">
<label for="Transformation">Transformation</label>
</div>
-->
Selectbox values are submitted with the name of the select element.
The name attribute on the option is not used (is invalid to be accurate), so all selected values are submitted as AwardsSecondaryCatagory
You can recover you data just by:
<%
AwardsSecondaryCatagory = request("AwardsSecondaryCatagory")
%>
and, then, just store it in your database!