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>
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>
I want to set a default option value for select tag, the values are declared as table in my component and showed with ngFor directive :
<form>
<div class="form-group col-4">
<span class="badge badge-theme mb-3">Quantité</span>
<select class="form-control" id="exampleFormControlSelect1">
<option *ngFor="let quantity of Quantities" [ngValue]="quantity">{{quantity}}</option>
</select>
</div>
<div class="form-group col-4">
<span class="badge badge-theme mb-3">Message personnalisé</span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
components.ts
Quantities = Array(50).fill(0).map((x,i)=>i);
You can do it the following way:
component.html
<select [(ngModel)]="seletedValue" class="form-control" id="exampleFormControlSelect1">
<option *ngFor="let quantity of Quantities" [ngValue]="quantity">{{quantity}}</option>
</select>
component.ts
seletedValue = ''; // set some default value from Quantities
OR
component.html
<select [(ngModel)]="seletedValue" class="form-control" id="exampleFormControlSelect1">
<option value="" [disabled]="true">Select quantity</option>
<option *ngFor="let quantity of Quantities" [ngValue]="quantity">{{quantity}}</option>
</select>
I have created Stackblitz.
What I did is created a variable in compoent and then bonded it with select tag. [(ngModel)]="selectedValue".
The variable then can be used as per your logic.
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.
I am learning AngularJS and user input. In my code, I tried to set default state for drop down menu and radio button with "selected" and "checked".
However, they do not work together with "ng-model" attribute.
Also, for the first radio button (ascending), the empty value attribute seems to hinder with "checked" attribute.
Could anyone explain why this happens and how to bypass this problem?
<div class="search">
<h1>Artist Directory</h1>
<label> Search: </label>
<input ng-model="query" placeholder="Search for artists" autofocus>
<label class="formgroup">by:
<select ng-model="listOrder" name="direction">
<option value ="name" selected="selected"> Name</option>
<option value="reknown"> Reknown</option>
</select>
</label>
<label class="formgroup">
<input ng-model="direction" type="radio" value=" " checked> Ascending
</label>
<label class="formgroup">
<input ng-model="direction" type="radio" value="reverse"> Descending
</label>
</div>
tie your button and select to an ng-model. Default values are the values you put in the model when the scope is first created. Then values are updated when user clicks :
function test($scope) {
$scope.selected = ['1','3'];
$scope.checked = "green";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="test">
<select name="" ng-model="selected" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br><br>
<input type="radio" ng-model="checked" value="red"> Red <br/>
<input type="radio" ng-model="checked" value="green"> Green <br/>
<input type="radio" ng-model="checked" value="blue"> Blue <br/>
<br>
Selected : {{selected}}
<br>
Checked : {{checked}}
</div>
</div>
See it in action : http://jsfiddle.net/913n30zf/
Select in AngularJS looks likes this:
<select ng-model="selectedOpt"
ng-options="opt for opt in listOrder">
</select>
And back in the controller you set
$scope.selectedOpt = $scope.listOrder[0];
which option you want to be select by default.