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
Related
I'm new in AngulsrJS and I've got following code:
<form ng-if="editorCtrl.edit" class="form-horizontal" role="form" ng-submit="editorCtrl.saveEntry()">
<div class="form-group">
<div class="col-md-6" ng-repeat="(key,field) in editorCtrl.editEntry">
<label>{{key}}</label>
<input type="text" class="form-control" value={{field}} />
</div>
</div>
<!-- ng-model="editorCtrl.toSave[key]" ng-value="{{field}}" that part was in input attributes -->
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Update selected entry" ng-disabled="form.$invalid" class="btn btn-primary"/>
</div>
</div>
</form>
Now I need to obtain values from input fields. I tried to use ng-model="editorCtrl.toSave[key], but it's not working in a correct way.
Any suggestions how to resolve this situation ?
if you can consider no necesary the "toSave" object maybe you can use the 2-way data binding properly only using editEntry Object :
<input type="text" class="form-control" value={{field}} ng-model="editorCtrl.editEntry[key]"/>
In this way after a submit you will get editEntry with the fields modifieds (or not), here is an example
https://jsfiddle.net/pv8qrwty/1/
run the example and if you modified the fields after you press the submit button it will be displayed in your browser console
hope this help ! and sorry for my english !
If zipcode is empty then form is invalid so button is disabled but if zipcode is 2 digits error message is showing but form is showing as valid in controller. If zipcode is empty then I need to disable button but I'm checking form valid or not but dont worry about ng-disabled. I just need solution for showing the "div" if and only if form is valid.
function submitUserDetail (formValid) {
if(formValid) {
$scope.showDiv = true;
}
}
<div class="">
<div class="">
<label required>
Zip code required
</label>
<label pattern>
Invalid Zip code
</label>
</div>
<div class="">
<input type="tel" maxlength="5" class="" name="zip5"
ng-model="userDetail.zipCode" required=""
pattern="^\d{5}$"
data-validate-on-blur="true" value=""
size="5">
<span class="" title="Reset" onclick="jQuery(this).prev('input').val('').trigger('change');"></span>
</div>
</div>
<div class="">
<div class="">
<div class="">
<span class=""></span>
<button class="" href="#" id="button" ng-click="submitUserDetail(form.$valid)" ng-disabled="form.$invalid">See section</button>
<span class=""></span>
</div>
</div>
</div>
<div ng-if="showDiv">
.......
</div>
Thanks in advance.
I assume that you have a <form> wrapping the HTML provided.
If so, you should make sure your <form> tag has novalidate applied so you're using AngularJS form validation and not HTML5 form validation:
<form name="form" ng-submit="submitUserDetail(form.$valid)" novalidate>
Also, it looks like you're mixing HTML5 validation attributes with AngularJS validation attributes. You should be using ng-required and ng-pattern instead of required and pattern.
I'm trying to perform simple form validation. I'm using required and ng-minlength conditions on my fields and ng-messages to display the error messages. the error messages should display only when user access the input field. But I do not see any error messages appearing. When I examined using chrome developer tools, I found the classes on the input field are changing but the 'has-error' class is not being added on the other div elements that are checking for this condition.
this is when the application got loaded.
this is when I clicked the username field and left the field without giving any data. Please observe the classes of the elements marked in red boxes. I'm not getting any errors displayed. What might the issue be?
1 this is the ng-messages code snippet that i'm using
<form role="form" name="userForm" novalidate class="container-fluid">
<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
<label for="email">username</label>
<input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" required ng-minlength="4">
<div ng-messages='userExists'>
<div ng-message='error'>Error!</div>
<div class="form-group" ng-message='notAvailable' class="has-error">Username already exists. Please choose a different username!!</div>
</div>
<div class="help-block" ng-messages="userForm.username.$error" ng-show="userForm.username.$touched" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
<div class="form-group" ng-message='required' class="has-error">Username cannot be empty</div>
<div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
</div>
</div>
Edited after the source code is posted:
<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
<label for="email">username</label>
<input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" ng-required="true" ng-minlength="4">
<div ng-messages='userExists'>
<div ng-message='error'>Error!</div>
<div class="form-group has-error" ng-message='notAvailable' >Username already exists. Please choose a different username!!</div>
</div>
<div ng-messages="userForm.username.$touched && userForm.username.$error" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
<div class="form-group has-error" ng-message='required'>Username cannot be empty</div>
<div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
</div>
</div>
This works on my machine.
The message will be displayed after you've submitted the form.
Make sure you've added required dependency in your module to use ngMessage. If necessary, please post the AngularJS code as well.
I am building a CMS which allows one to add all kinds of form fields, one of which is a radio button.
I am allowing the user to specify whether the radio button is required / not required. If its required, then user has to select a radio button, otherwise a message will be displayed.
Problem is i have been unable to get the validation to work. I.e. data-ng-required.
<div class="radio" data-ng-repeat="option in formField.options">
<label>
<input type="radio"
data-ng-attr-id="{{formField.fieldId}}"
name="{{formField.fieldId}}"
value="{{option}}"
data-ng-model="pageForm.dynamicFormField[formField.fieldId]"
data-ng-required={{formField.required}}>
{{option}}
</label>
</div>
<!-- messages -->
<span class="help-block"
data-ng-show="_pageForm[formField.fieldId].$error.required && formSubmitted.pageForm">{{formField.labelDisplayText}} is required
</span>
<div class="radio" data-ng-repeat="option in formField.options">
<label>
<input type="radio"
data-ng-attr-id="{{formField.fieldId}}"
name="{{formField.fieldId}}"
value="{{option}}"
data-ng-required="formField.mandatoryField === true ? !pageForm.dynamicFormField[formField.fieldId] : false"
data-ng-model="pageForm.dynamicFormField[formField.fieldId]">
{{option}}
</label>
</div>
<!-- messages -->
<span class="help-block"
data-ng-show="_pageForm[formField.fieldId].$error.required && formSubmitted.pageForm">{{formField.labelDisplayText}} is required
</span>
I enter the page and I can see the validation message immediately.
<div ng-class="{'has-error': test.$invalid}" class="form-group" >
<input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
<div class="help-block error" ng-show="test.field.$error.required">Required</div>
</div>
link
How can avoid that ?
Your issue is essentially with respect to the fact that the condition for
ng-show is only test.field.$error.required.
What's the problem with this?
Even when the page loads, the field is still not a valid email id.
So, what's the fix?
You need to check that the user has actually clicked on the field and the field is no longer pristine.
How do we do that?
In the ng-show, add the following condition.
test.field.$error.required && test.field.$dirty
Here is a working DEMO
You also need to add a check to see if the input has been touched too.
<div ng-class="{'has-error': test.$invalid}" class="form-group" >
<input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
<div class="help-block error" ng-show="test.field.$error.required && test.field.$touched">Required</div>
</div>