im using dropdownlists in my kendogrid popup forms. im using them in template like
<label for="primaryClient" style="text-align:left">Primary Account*</label>
<div class="k-edit-field"><input name="primaryClient" data-bind="value:primaryClient" data-value-field="value" data-text-field="text" data-source="dsDocClientGroup" data-role="dropdownlist" required validationMessage="Required" /></div>
However when i check whats actually being posted. its posting an array:
primaryClient['label'],
primaryClient['value']
any ideas while this would be happening
Related
I want to use a list element for drop-down select menu but it implemented everywhere with model. I use Spring I want the user to select items from a static list.
There are some use like
<form:select path="...." items=$(......)>
but it needs a model for items as I understood. Also I don't want to post anything I just need the value of the select menu and I will do everything with JS. How can I achieve this?
My List element:
private static String[] lang = {"en","fr","tr","es","de"};
I tried to use List like that but didn't work. I mean every form elements gone.
<form:form commandName="TranslateService">
<div class="form-group col-sm-6">
<label class="control-label" for="first-name">Target Languages<span class="required">*</span>
</label>
<div>
<form:select path="lang" items="${lang}"></form:select>
</div>
</div>
</form:form>
it's a hard way to solve your question. instead of this you can create a model for form.
I'm building a view with Thymeleaf templates, which contains a form that provides a way to bind the value of my inputs with the attributes passed in the model. The backend was developed using Spring 4.
The following snippet includes an autocomplete datalist with the data of the namelist object, which was added to the model as an attribute. Said namelist is an ArrayList of a class with the fields int id and String name.
<form th:action="#{/}" method="POST" th:object="${example}">
<div class="form-group">
<input list="names" class="form-control" id="nameinput" th:field="${example.num.id}"> </input>
<datalist id="names">
<option th:each="row : ${namelist}" th:value="${row.id}" th:label="${row.name}">
</datalist>
<button>submit</button>
</div>
</form>
The value of the selected option is already bound to example.num.id, which is the expected and desired behaviour. However, when loading the view on a web browser (tested on latest Firefox and Chrome), it is represented like this:
As you can see, the id's are showing. However, I'm trying to emulate the behaviour of a <select>; the value should not be shown, just the text or label.
Is there a better way to achieve this? Am I not using the datalist properly?
I'm trying to use form validation on a Kendo UI for Angular DatePicker and it just doesn't seem to work.
I'm doing the following on all other form elements:
<div class="form-group row" [ngClass]="{ 'has-danger' : email.invalid && (email.dirty || email.touched) }">
<input id="email" type="text" class="form-control" [(ngModel)]="member.email" name="email" #email="ngModel" required />
</div>
This works perfectly fine.
But when I try the same with the Kendo UI for Angular DatePicker I get the following error:
<div class="form-group row" [ngClass]="{ 'has-danger' : geburtsdatum.invalid && (geburtsdatum.dirty || geburtsdatum.touched) }">
<kendo-datepicker
id="geburtsdatum"
[format]="'dd.MM.yyyy'"
[(value)]="mitglied.geburtsdatum"
#geburtsdatum="ngModel"
required>
</kendo-datepicker>
</div>
Now I get the error:
There is no directive with "exportAs" set to "ngModel".
I can't seem to find a way to validate Kendo UI for Angular form elements in a simple way.
The exportAs defines the name under, which the component/directive will be exported. In this case, you would like to export ngModel, which is not present in the component declaration. The solution is simple - just use [(ngModel)] instead of [(value)] binding. Thus Angular will be able to select NgModel instance and export it:
<kendo-datepicker
id="geburtsdatum"
[format]="'dd.MM.yyyy'"
[(ngModel)]="mitglied.geburtsdatum"
#geburtsdatum="ngModel"
required>
</kendo-datepicker>
Check the Angular Form documentation for more details, how to show/hide validation errors properly.
https://angular.io/guide/forms#show-and-hide-validation-error-messages
[TL;DR]
The DatePicker component implements the ControlValueAccessor interface, which makes it a fully compatible Angular form component. The Angular Validation on the other hand works against AbstractControl instances (basically NgModel or FormControl directives).
With this in mind, in order to get validation working, you will need to decorate the component either with [ngModel] or [formControl|formControlName]:
<kendo-datepicker
name="birthDate"
[(ngModel)]="user.birthDate"
[min]="min"
[max]="max"
></kendo-datepicker>
Here is a working demo that demonstrates this:
https://plnkr.co/edit/seJ4jLg9WziemQtCVuxk?p=preview
For further readings, refer to the Angular Form documentation:
https://angular.io/guide/user-input
I have a View in ASP.NET Core application where I have a form:
<div class="form-group">
<label asp-for="#Model.Property" class="col-md-2 control-label">Description</label>
<div class="col-md-10">
<textarea asp-for="#Model.Property" class="form-control" rows="10" data-val-maxlength-max="1000"></textarea>
<span asp-validation-for="#Model.Property" class="text-danger" />
</div>
</div>
I want to make textarea empty and Not to have the value from Model. I don't see any value property on this textarea.
Is it possible to have textarea mapped to #Model.Property but Not display it?
I'll be using this textarea for POST only and I don't want to display anything for GET. But I want to have other properties fetched so that's why I need the model in GET.
I also tried to change the Model property in controller before sending, but this model is a part of a DBSet and if I modify in controller then the DBSet gets affected.
Javascript is another option but I want to avoid that.
I had a look at How to overwrite one model property in ASP.Net core but this is not convincing.
Thank you.
I am using MVC3 and my view has a mixture of razor and raw html in my view e.g.
<div class="editor-field">
#Html.EditorFor(model => model.PAGE)
#Html.ValidationMessageFor(model => model.PAGE)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PERIODICAL)
</div>
div class="editor-field">
<div class="editor-field">
<input type="text" id="periodicallist" name="tiperiodical" />
</div>
</div>
My JavaScript applies the tokenInput control plugin to the textbox and its all fine, but I wonder how I can validate this (i.e. for empty textbox/tokenInput), it needs to filled with at least 1 token. At the moment it's confusing having these two forms of creating a view, letting Razor constuct elements direct from the model, and then adding more complexity/cusomization by usin jQuery plugins etc.
Can anyone advise how I can validate jQuery plugins on posting back to the controller?
Cheers
If you are using unobtrusive validation then you all have to do is add the necessary HTML5 data attributes to the input elements from javascript and microsoft's unobtrusive javascript library will take care of the rest.
For ex. if you have dynamically injected a textbox into the form through javascript and you need to perform required validation then all you have to add the data-val and data-val-required attributes as below.
<input data-val="true"
data-val-required="No. of joinees is required"
name="NoOfJoinees"
type="text" />
EDIT:
To display the validation error message you have to inject a span near to the field,
<span class="field-validation-valid"
data-valmsg-for="NoOfJoinees"
data-valmsg-replace="true">
</span>