I have validation issue if i use k-ng-model on field that field is not required with Angularjs validation , User can submit the form so below code field is required even i dont select the value user can still submit the form.. Any idea how to solve it ?
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && ddChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div>
You can use ng-model with k-ng-model, Try assigning ng-model to a seperate variable and use ng-required.
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" ng-model="challengesDTO.themesKyListValue" ng-required
id="themesList"></select>
This solution worked for me: kendo ui, angular require validation for numeric text box
Just create a hidden input for the each kendo widget and bind the model from your k-ng-model also to the ng-model of the hidden field. The k-ng-model seems to be no NgModelController, which is why the validators cannot hook into the models $validators and do their work.
<input kendo-date-time-picker k-ng-model="$ctrl.event.endDate"></input>
<input type="hidden" name="endDate" ng-model="$ctrl.event.endDate" required></input>
Related
I create form and use AngularJs. I need display errors and I have a problem.
My expression for ng-show doesn't work.
My code:
<form name="createProductForm" ng-submit="createProduct(product)" novalidate>
<input type="text" ng-model="product.name" ng-minlength="3" required> <br>
<p ng-show="createProductForm.product.name.$error.required && createProductForm.product.name.$dirty">Nazwa produktu jest wymagana.</p>
<p ng-show="createProductForm.product.name.$error.minlength && createProductForm.product.name.$dirty">Nazwa produktu jest zbyt krótka.</p>
<button type="submit" ng-disabled="createProductForm.$invalid">Dodaj produkt</button>
</form>
Your input tag MUST have a name attribute. ngModel does not provide validation states.
<input name="nameAttributeHere"/>
<p ng-show="createProductForm.nameAttributeHere.$error.required && createProductForm.nameAttributeHere.$dirty">...</p>
ngModel and form validation states are completely separate directives.
I am trying to call a 'custom validation directive' by watching the ngModel.
My submit function name is dotted.[sllr.save()]
<div class="col-sm-10"><input type="text" placeholder="must be numeric" class="form-control" name="meterCount" ng-model="sllr.entity.MeterCount" is-number>
<div class="m-t-xs" ng-show="sllr.save.meterCount.$invalid && sllr.save.submitted">
<small class="text-danger" ng-show="sllr.save.meterCount.$error.cvalid"></small>
</div>
How should I type this funtion name in ngShow?
I solved. I thought that I should use the value in ng-submit. But actually giving a name to form itself works.
<form method="post" class="form-horizontal" **name="seller_create"** ng-submit="sllr.save()">
not sure why but the property binds just fine to textarea and doesnt want to bind to a text box...
Here is HTML:
<form method="post" ng-submit="vm.executeAction('CompleteWorkOrder')">
<div class="form-group">
<label for="resolutionNote">#("Resolution Note".T())</label>
<textarea name="resolution" class="form-control" rows="4" placeholder="Provide resolution..." ng-bind="vm.woComplete.Resolution" required></textarea>
</div>
<div class="form-group">
<label for="completionDate">#("Completion Date".T())</label>
<input type="text" name="completionDate" class="form-control" ng-bind="vm.woComplete.Resolution" required>
</div>
<label>#("MRT".T()) {{vm.data.MRT}}</label>
<button type="submit" class="btn btn-success pull-right">Submit</button>
</form>
and the result
Does anyone know why this is happening? Thanks.
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
In your screenshot you can see that the text you entered in the text area DOES appear between the <input> and </input> tags. But, while that's fine for a textarea, that's not how an input works. An input stores it's data in the value attribute. You would want to use ng-model to get what you want.
I want to apply validation on checkbox with toggle effect
<div class="togglebutton form-group has-feedback paddingTopBtn8">
Yes<label> <input type="checkbox" ng-model="checkfield" required data-error="This is an mandatory field">
<div class="help-block with-errors"></div>
<span class="toggle"></span></label>No
</div>
Can anyone please help me. Its not working. I applied required and data-error also but at the time of submit the form shows the ng-valid whether i checked the checkbox or not
Thanks in advance
I am not much clear on what you mean by toggle effect with checkbox.
But i have utilized form validation Example of https://scotch.io/tutorials/angularjs-form-validation and created a small POC for checkbox validation.
PLease have a look here.
<div class="togglebutton form-group has-feedback paddingTopBtn8">
Yes<label> <input type="checkbox" ng-model="user.checkfield" required
name="checkfield">
<p ng-show="userForm.checkfield.$invalid && !userForm.checkfield.$pristine"
class="help-block">Please toggle.</p>
<span class="toggle"></span></label>No
</div>
CodePen Example
I think you only need:
<input type="checkbox" ng-model="checkfield" required data-error="This is an mandatory field" checked data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger">
I have defined an input feild as
<form name="signUpForm">
<input type="text" name="username" ng-minlength="8" ng-maxlength="64" ng-model="user.username" ng-pattern="/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^]))/">
</form>
And defined user in controller as
$scope.user{};
Now when I bind user.username value in HTML, its preventing it.
<p ng-if="user.username.length > 0">Display True</p>
Even if I simply bind its value in HTML as
{{user.username}}
Its not being displayed.
Now if I remove ng-pattern from input field as :-
<input type="text" ng-minlength="8" ng-maxlength="64" ng-model="user.username">
then only its binding and that too after satisfying ng-minlength="8" condition. Means '12345678' is displayed and '1234567' not.
One more issue is there i.e. if I use ng-pattern then ng-minlength validation is not working.
<p ng-if="signUpForm.username.$error.minlength">Please enter minimum length</p>
You can try setting the form.$setViewValue.length instead of the model's length
for example:
<p ng-if="signUpForm.username.$setViewValue.length > 0">Display True</p>
here's a solution i found:
How do I prevent AngularJS from unbinding a form input's value from its model when it's invalid?