I have a angular code where i am running a text box validation on On Blur .
Now if i don't do any change on use the column, the validation will not run.
What are the alternatives that i can run this validation on may be Page Load or submit click .
Basically i want my validation to run even if that text box is not even touched.
<div class="form-group head2" ng-show="workflowlevel>3">
<label for="approvedAmountFinal" class="col-md-12 col-sm-12 labels"
>Approved Amount:
</label>
<input
ng-disabled="rejectedOrMoreInfo || isviewmode || workflowlevel>5"
type="text"
class=" col-md-6 col-lg-6 col-sm-6 col-xs-6"
id="approvedAmountFinal"
ng-model="$parent.approvedAmountFinal"
ng-blur="validate($parent.approvedAmountFinal);"
name="approvedAmountFinal"
ng-pattern="/^-?[0-9][^\e]*$/"
required
/>
<span
class="error col-md-12 col-sm-12"
ng-show="myForm.raiseFundRequest1.approvedAmountFinal.$touched && myForm.raiseFundRequest1.approvedAmountFinal.$invalid"
>This field cannot be blank.</span
>
<span
class="error col-md-12 col-sm-12"
ng-show="myForm.raiseFundRequest1.approvedAmountFinal.$dirty &&myForm.raiseFundRequest1.approvedAmountFinal.$invalid"
>This is not a valid amount. Please enter valid amount.</span
>
<span class="error col-md-12 col-sm-12" ng-show="isMoreThanRqstAmount"
>Approved amount should be less than or equal to requested amount</span
>
<span
class="error col-md-12 col-sm-12"
ng-show="isApprovedAmountZero&&!rejectedOrMoreInfo"
>Approved amount cannot be zero or lesser.
</span>
</div>
You can use custom directive or ng-pattern (regex) to validate input textbox in angularJS
You can set validation manually on form submit, check bellow code.
this.myForm.raiseFundRequest1.approvedAmountFinal.markAsToched();
this.myForm.raiseFundRequest1.approvedAmountFinal.markAsInvalid();
same for your other ngIf condition set as true, let me know if this things not work.
Related
I have one checkbox/radio after clicking on it some fields will be shown and in that some fields need to be marked as mandatory and some fields are not mandatory. This mandatory conditions is applied before showing those fields and those are also disabled before showing but I am unable to submit the form because of that.
I don't want these kind of fields to be validated when disabled. Validation should work when I click on radio button.
Can anybody help me in this how to do this???
<div class="col-lg-6">
<div class="form-group">
<label class="control-label">{{controls.label}}</label>
<input type="checkbox" class="form-control input-lg mandatory" ng-model="formData[$parent.$parent.$index][controls.id]" value="{{controls.value}}" name="control_{{$parent.$parent.$index}}_{{controls.id}}" ng-required="{{controls.mandatory}}">
<div ng-show="submitted && profilecreate.control_{{$parent.$parent.$index}}_{{controls.id}}.$error.required" class="error_message">This field is required</div>
</div>
</div>
<div class="col-lg-6" ng-repeat="child in controls.children">
<div class="form-group" ng-hide="!formData[$parent.$parent.$index][child.parentId]">
<label class="control-label">{{child.label}}</label>
<input
type="{{child.type}}"
id="{{$parent.$parent.$index}}_{{child.id}}"
ng-model="formData[$parent.$parent.$index][child.id]"
name="control_{{$parent.$parent.$index}}_{{child.id}}"
ng-disabled="!formData[$parent.$parent.$index][child.parentId]"
ng-required="{{child.mandatory}}"
ng-class="!formData[$parent.$parent.$index][child.parentId] ? 'disabled' : 'normalinput'">
<div ng-show="submitted && profilecreate.control_{{$parent.$parent.$index}}_{{child.id}}.$error.required" class="error_message">This field is required</div>
</div>
</div>
The reason it's triggering validation even though it's disabled is because you are using ng-hide and not ng-if. Try changing that and it might work.
Here is the difference between ng-if and ng-show/hide
I've a form with input controls which I need validate, but the angularjs validation doesn't work as I expected, something I'm doing wrong
This is a control of my form, between tags
<form id="addServiceForm" name="addServiceForm">
<div class="form-group has-feedback" ng-class="{'has-error': addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}">
<label class="control-label" for="qty">Cantidad</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-shopping-cart"></i></span>
<input id="qty" name="qty" type="text" class="form-control" placeholder="Ingresa cantidad" ng-model="service.quantity" ng-required="true"/>
</div>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" id="helpBlockQty" class="help-block">La cantidad es requerida.</span>
</div>
</form>
If I assign ng-class = "'has-error'" directly it works as expected, but when I put conditions like this:
ng-class="{'has-error':addServiceForm.description.$invalid && addServiceForm.description.$dirty}"
Nothing occurs, it doesn't works as I need.
I'm begginer using angularjs and bootstrap, please be patient with me =(
The problem with your code is that there is no condition set on your input such as ng-minlength to tell Angular when .$valid or .$invalid should return true. So Angular just defaults to ng-minlength="1" and the error is never displayed inless you delete all letters.
You should also look into the $submitted method, it is very nice for form validation.
<form id="addServiceForm" name="addServiceForm">
<div class="form-group has-feedback" ng-class="{'has-error': addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}">
<label class="control-label" for="qty">dirty: {{addServiceForm.qty.$dirty}} invalid: {{addServiceForm.qty.$invalid}}</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-shopping-cart"></i></span>
<input id="qty" name="qty" type="text" class="form-control" placeholder="Ingresa cantidad" ng-model="service.quantity" ng-required="true"
ng-minlength="4"/>
</div>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">
Another Div
</span>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" id="helpBlockQty" class="help-block">La cantidad es requerida.</span>
</div>
</form>
finally I could resolve the problem, for a unknown reason the form could not be positioned immediately after the div with the controller inside. I just moved the code at last part of my html before the closing div, and with this move my form works exactly as I need.
Thanks for all your comments and recommendations.
If someone knows why this is necessary, I hope you share.
Regards
I have angularJS validation issue with below field , if i use ng-model its not making form $valid even the value is selected, So i used k-ng-model now this field is out of the validation scope, Any suggetion will be appreciated.
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"
ng-model-options="{updateOn: 'blur'}"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && addChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div
I have a simple code :
<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">
<div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisName" ng-model="aDiagnosis.Name" ng-disabled="true">
</div>
<div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisResult" ng-maxlength="200" ng-model="aDiagnosis.Result" />
<p class="help-block" ng-if="form.aDiagnosisResult.$error.maxlength">Too Large</p>
</div>
</div>
and use $scope.form.$valid to generate the error message.
But problem is since use ng-repeat every time it finds the same name and when i want to generate second list by clicking a button ,,first error message is gone and error-message now works on the second text (obviously).
So How can i generate error-message each and every time dynamically ,,so every text form in ng-repeat,it has it's own error-message.
You can generate dynamically name attribute of your inputs in ng-repeat. For example, you can put $index (or id of your objects or whatever you want) to generate unique name for your inputs.
<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">
<div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisName-{{$index}}" ng-model="aDiagnosis.Name" ng-disabled="true">
</div>
<div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisResult-{{$index}}" ng-maxlength="200" ng-model="aDiagnosis.Result" />
<p class="help-block" ng-if="form['aDiagnosisResult-' + $index].$error.maxlength">Too Large</p>
</div>
</div>
Example on plunker.
In the edit operation the value of the input box is filled by ng-model. But even though the value is present the validation shows red for input box as it needs a value to be typed.How to overcome this issue
<div class="row row-no-padding" ng-class="{ 'has-error' : schoolform.summary.$invalid || schoolform.summary.$pristine }">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 vz_input">
<input class="form-control" id="summary" name="summary" type="text" value="" placeholder="Summary" ng-model="project.summary" data-fv-field="summary" required jira-type="input" data-type="str">
</div>
</div>
The problem is that you should use && instead of ||. So it will be when the input is invalid and dirty:
<div class="row row-no-padding" ng-class="{ 'has-error' : schoolform.summary.$error.$required && schoolform.$submitted }">