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
Related
I'm using Jetstream blade components in my project, including x-jet-dialog-modal and x-jet-input. The modal window is used to add or edit records and works fine. The inputs are bound to a model "person" using the "wire:" syntax, and everything goes as expected.
Now I want to use the same modal window to show the record fields in a read-only manner, when pressing a "view" button. My idea is to make the inputs read only and hide the "save" button dynamically, using a public property of the Livewire controller (component).
So, in Livewire component I have a default value:
public $disableEdition = false;
And in the blade file:
<div class="mt-2">
<x-jet-label for="name" value="{{ __('Name') }}" />
<x-jet-input id="name" type="text" class="form-control" wire:model.defer="person.name" {{ $this->disableEdition ? 'readonly' : '' }}/>
<x-jet-input-error for="person.name" class="mt-2" />
</div>
I expected the input field to appear with attribute "readonly" (and of course non-editable and formatted with corresponding Bootstrap styles), but the browser inspector reveals that no attribute was added to the input.
Maybe you can help me with a solution or even a better approach to accomplish my goal.
Best regards.
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 currently trying to add validation to an angular 2 form, but for some reason I can't get my submit button to disable when the required fields are not filled in.
Here is the code of my form template:
<h1 md-dialog-title>{{title}}</h1>
<form #formCtrl="ngForm">
<md-dialog-content>
<md-input-container>
<input #name md-input placeholder="Name" value="" name="name" focused required>
</md-input-container>
<br />
<md-select #inputtype placeholder="Input type" name="inputtype">
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
According to several examples, this should work, however the button is never disabled. I've also tried "!formCtrl.valid", also to no avail.
I've tried using non-material design input fields thinking maybe that would be the issue, but it still won't work.
I then tried copy/pasting the following simple example into my application, and even that won't work at all:
http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
Any ideas as to what might prevent it from working correctly?
Assuming you are using a newer release than Angular 2 final:
You need to add ngModel, which binds the form value based on the name attribute’s value. In your case one is name="inputtype" the other is name="name". So you need to add ngModel to bind the values, and your form should work as you wish! :)
So the following should work (removed a bit of noise from code):
<form #formCtrl="ngForm" (ngSubmit)="save(formCtrl.value)"> //whatever your submit method is
<md-dialog-content>
<md-input-container>
<input md-input name="name" required ngModel>
</md-input-container>
<md-select name="inputtype" required ngModel>
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
Don't remember when this was introduced, this should be found somewhere in the changelogs which can be useful to have a look at once in a while, since Angular is constantly tweaking things almost in every release. So following that will keep you updated with changes and syntax :)
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.
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