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
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'm working on a Laravel application. In my view i have a form, what I'm trying to do is when submitting the form and one field is not valid, it returns the values of valid fields, so the user will have to edit the wrong field only, not the full form.
This is my form and an example. In here, the user didn't enter the url, so it shows an error message and return the values of the correct fields (client, domain provider, etc...) The problem i'm facing is this is not working for the avatar field and service field!
I'm returning the value by adding value="{{ old('client') }}" to the input tag , as shown in code below:
<div class="form-group row">
<label class="col-lg-3 col-form-label">Client:</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="client" value="{{ old('client') }}">
<small class="error">{{$errors->first('client')}}</small>
</div>
</div>
QUESTION: How to add it for avatar and select service fields?
Avatar: - currently its not returning the value
<div class="form-group row">
<label class="col-lg-3 col-form-label">Attach avatar:</label>
<div class="col-lg-9">
<input type="file" class="form-input-styled" data-fouc="" name="avatar" value="{{ old('avatar') }}">
<small class="error">{{$errors->first('avatar')}}</small>
</div>
</div>
Select service:
<div class="form-group row">
<label class="col-lg-3 col-form-label">Select Service:</label>
<div class="col-lg-9">
<select data-placeholder="Select service" class="form-control form-control-select2" data-fouc="" name="service" >
<option></option>
<option value="Website">Website</option>
<option value="Application">Application</option>
</select>
<small class="error">{{$errors->first('service')}}</small>
</div>
</div>
For the select tag ,
you must put a condition for every option tag ,
if the last submitted value is equal to this option value put selected
attribute to this option
something like that ....
<div class="form-group row">
<label class="col-lg-3 col-form-label">Select Service:</label>
<div class="col-lg-9">
<select data-placeholder="Select service" class="form-control form-control-select2" data-fouc="" name="service" >
<option></option>
<option value="Website" {{ old('service') == "Website" ? "selected" : ""}}>Website</option>
<option value="Application" {{ old('service') == "Application" ? "selected" : "">Application</option>
</select>
<small class="error">{{$errors->first('service')}}</small>
</div>
</div>
hi for select tag this work for me
<div class="form-group row">
<label class="col-lg-3 col-form-label">Select Service:</label>
<div class="col-lg-9">
<select data-placeholder="Select service" class="form-control form-control-select2" data-fouc="" name="service" >
<option></option>
#foreach($Listservice as $key)
<option value ="{{$key->id}}"> {{$key->Website}}
{{$key>Application}}</option>
#endforeach
</select>
</div>
</div>
and in your model add these
$listservice = Service::get();
i hope it s help
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 have single select using AngularJs ng-options that is working good but my requirement is to make multiselect using AngularJs , How can i achieve that task using ng-options ?
main.html
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="originatingGroup" class="required col-md-4">Originating group:</label>
<div class="col-md-8" disable-control-point="CHALLENGES_EDIT">
<select
class="form-control"
name="OriginatingGrp"
id="OriginatingGrp"
ng-model="challengesDTO.originatingGrpLkupCode"
ng-options="OriginatingGroupOption.id as OriginatingGroupOption.text for OriginatingGroupOption in challengeGroupOptions">
<option value="">
Select...
</option>
</select>
</div>
</div>
</div>
Just add "multiple"
<select multiple
class="form-control"
name="OriginatingGrp"
id="OriginatingGrp"
ng-model="challengesDTO.originatingGrpLkupCode"
ng-options="OriginatingGroupOption.id as OriginatingGroupOption.text for OriginatingGroupOption in challengeGroupOptions">
<option value="">
Select...
</option>
</select>
challengesDTO.originatingGrpLkupCode must and will be an array
I want to manage requirement if either of input has any value second of them has to fill like that in angularJS
Please help me what kind of approaches are the best in angular way!
Here is my code
<div class="form-group recipe_item" ng-repeat="recipe in pc.recipes">
<div class="form-group">
<label class="col-sm-4 control-label">Select Product</label>
<div class="col-sm-8" ng-controller="ProductCtrl as pc">
<select class="form-control" ng-model="recipe.partId"
ng-options="item.id as item.name for item in pc.products"
>
<option value="">-- choose product --</option>
</select>
</div>
</div>
<div class="form-group">
<label id="lbl_qty" class="col-sm-4 control-label">Quantity</label>
<div class="col-sm-8">
<input type="number" class="form-control" ng-model="recipe.qty" {{isValidNumber(recipe.partId)}}/>
</div>
</div>
</div>
and my controller
$scope.isValidNumber = (number) =>
return number > 0
you can use ng-required... this is what you need... here is PLUNKER example...
I updated example by adding angularjs form controller and here is form controller documentation for more details...