How to validate this checkboxes, at least one must be checked, if not, there has to be some message or alert
<div class="form-group" ng-class="{ 'has-error' : actionsAddForm.active.$invalid && !actionsAddForm.active.$pristine }">
<label class="control-label col-sm-2">Days*</label>
<div class="col-sm-10">
<label>Monday
<input type="checkbox" ng-model="actions.value1">
</label>
<label>Tuesday
<input type="checkbox" ng-model="actions.value2">
</label>
<label>Wednesday
<input type="checkbox" ng-model="actions.value3">
</label>
<label>Thursday
<input type="checkbox" ng-model="actions.value4">
</label>
<label>Friday
<input type="checkbox" ng-model="actions.value5">
</label>
<label>Saturday
<input type="checkbox" ng-model="actions.value6">
</label>
<label>Sunday
<input type="checkbox" ng-model="actions.value7">
</label>
</div>
This can be done :
<div ng-hide="actions.value1 || actions.value2 || actions.value3...">
You have an error
</div>
Otherwise, if you want to be able to use $valid,... You will have to create a custom directive inheriting from ngModelController, and adding your custom validators inside : https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
Related
there is a form which have two checkbox option one is English and another one is Hindi.On the basis of language selection div(child form) will open.but i have a condition if child form or div have some value then on page load checkbox will be check and div will be on open state.
Code which i try is-
<label class="radio-inline" ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true" >
English <input type="checkbox" ng-checked="true"><br /><br />
</label>
<label class="radio-inline" ng-if="!$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
English <input type="checkbox" ng-model="ENchkselct" ><br /><br />
</label>
and this is my div
<div ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true && astroProfile.LanguageId ==='EN' ||ENchkselct" ng-show="ENchkselct">
<div class="col-sm-6 h3"><b>English Profile Translation</b></div><br /><br /><div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Display First Name</label>
<div class="col-sm-6">
<input type="text" name="profileengfirstname" ng-model="astroProfile.FirstName" class="form-control" />
<!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileengfirstname.$error.required">
Profile First Name is required.
</span>-->
</div>
<label class="col-sm-1 control-label" ng-if="astroProfile.FirstName=== null"><span class="label label-danger">Incomplete</span></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Display Last Name</label>
<div class="col-sm-6">
<input type="text" name="profileenglastname" ng-model="astroProfile.LastName" class="form-control" />
<!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileenglastname.$error.required">
Profile Last Name is required.
</span>-->
</div>
<label class="col-sm-1 control-label" ng-if="astroProfile.LastName === null"><span class="label label-danger">Incomplete</span></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Profile Description</label>
<div class="col-sm-6">
<textarea name="profileengresumetext" ng-model="astroProfile.ResumeText" class="form-control"></textarea>
<!--<span ng-show="astroProfileform.$submitted && astroProfileform.profileengresumetext.$error.required">
Profile Resume Text is required.
</span>-->
</div>
<label class="col-sm-1 control-label" ng-if="astroProfile.ResumeText=== null"><span class="label label-danger">Incomplete</span></label>
</div>
</div>
this code only works when checkbox is checked on load but when i checked the checkbox it will not show the div.I am new for angularjs please guide me.
I try to open div automatically if checkbox is check on load and if not then when user checked the checkbox it will show the div
AngularJs creates a child $scope inside ng-if so you should use $parent object to access the parent controller $scope.
Code example:
<label class="radio-inline" ng-if="$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
English <input type="checkbox" ng-checked="true"><br /><br />
</label>
<label class="radio-inline" ng-if="!$ctrl.astrologerLanguageDetails.IsEnglishValue === true">
English <input type="checkbox" ng-model="$parent.ENchkselct" ><br /><br />
</label>
I have been trying to validate Checkbox set and Radio set and show the error messages using ng-messages directive but it does not work out as expected. The ng-messages does not show the error message at all. I am populating error messages using an html file. Up until the errors are resolved, the submit button will be disabled in my form.
How can I show error messages for the Checkbox set and Radio set when:
One option is not selected in Radio set?
At least one option is not selected in Checkbox set?
Scaling the check for the Checkbox set so that we can check at least 2 or more are checked, etc.?
Here's my form:
<form name="userForm" ng-submit="submitForm()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && !userForm.subscribe.$touched }">
<label class="checkbox-inline">
<input type="checkbox" id="subscribe1" value="option1" name="subscribe[]" ng-model="user.subscribe" required> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="subscribe2" value="option2" name="subscribe[]" ng-model="user.subscribe" required> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="subscribe3" value="option3" name="subscribe[]" ng-model="user.subscribe" required> 3
</label>
<div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid">
<div ng-messages-include="home/messages.html"></div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && !userForm.gender.$touched }">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" ng-model="user.gender" />
male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" ng-model="user.gender" />
female
</label>
</div>
<div class="help-block" ng-messages="userForm.gender.$error" ng-show="userForm.gender.$invalid">
<div ng-messages-include="home/messages.html"></div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-success " ng-disabled="userForm.$invalid">Submit</button>
</form>
messages.html
<span ng-message="required">This field is required</span>
<span ng-message="minlength">This field is too short</span>
<span ng-message="maxlength">This field is too long</span>
<span ng-message="required">This field is required</span>
<span ng-message="email">This needs to be a valid email</span>
controller.js
angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngMessages']);
angular
.module('myApp')
.controller('HomeCtrl', HomeCtrl);
HomeCtrl.$inject = ['$scope'];
function HomeCtrl($scope) {
$scope.userForm = {};
}
Payment Checkbox set:
<div class="form-group" ng-class="{ 'has-error' : userForm.payment.$invalid && userForm.payment.$touched }">
<label class="checkbox-inline">
<input type="checkbox" id="payment1" value="Visa" name="payment" ng-blur="doTouched()" ng-model="user.payment[1]" ng-required="!someSelected(user.payment)"> Visa
</label>
<label class="checkbox-inline">
<input type="checkbox" id="payment2" value="Mastercard" name="payment" ng-blur="doTouched()" ng-model="user.payment[2]" ng-required="!someSelected(user.payment)"> Mastercard
</label>
<label class="checkbox-inline">
<input type="checkbox" id="payment3" value="Cash" name="payment" ng-blur="doTouched()" ng-model="user.payment[3]" ng-required="!someSelected(user.payment)"> Cash
</label>
<div class="help-block" ng-messages="userForm.payment.$error" ng-show="userForm.payment.$invalid && userForm.payment.$touched">
<div ng-messages-include="home/messages.html"></div>
</div>
</div>
Check this sample:
http://plnkr.co/edit/2w0lIf?p=preview
The check boxes list use the ng-required directive with the someSelected function (defined in the controller) which checks if at least one item is selected:
<div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && userForm.subscribe.$touched }">
<label class="checkbox-inline">
<input type="checkbox" id="subscribe1" value="option1" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[1]" ng-required="!someSelected(user.subscribe)"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="subscribe2" value="option2" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[2]" ng-required="!someSelected(user.subscribe)"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="subscribe3" value="option3" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[3]" ng-required="!someSelected(user.subscribe)"> 3
</label>
<div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid && userForm.subscribe.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
The option button group is easier and use the ng-required directive with the condition !user.gender:
<div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && userForm.gender.$touched }">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" ng-model="user.gender" ng-required="!user.gender"/>
male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" ng-model="user.gender" ng-required="!user.gender"/>
female
</label>
</div>
<div class="help-block" ng-messages="userForm.gender.$error" ng-if="userForm.gender.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
The ngBlur directive resolves the issue that a check boxes list become "touched" only when all the items in list are blurred, calling doTouched() function::
$scope.doTouched = function() {
$scope.userForm.subscribe.$setTouched();
}
P.S. pay attention to correct names: userForm is the HTML name of the <form>, user is the name of the model to which is bound the form.
Here is an example I created that suites our purpose.
Our app would create multiple checkbox questions per page, and $touched didn't seem to work on input checkbox fields that all had the same name attribute.
Also the custom angular plugins/directives I've seen for checkboxes are nice (where they just bind to 1 array model) but don't seem to support 'required'.
Here i set a custom_touched event per question which I set via ng-click:
http://jsfiddle.net/armyofda12mnkeys/9gLndp5y/7/
<li ng-repeat="choice in currentquestion.choices">
<input
type="checkbox"
ng-model="choice.selected"
ng-required="!somethingSelectedInTheGroup(currentquestion.required, currentquestion.choices)"
ng-click="currentquestion.custom_touched = true;"
name="{{currentquestion.question_code}}"
id="{{currentquestion.question_code}}_{{choice.option_value}}"
value="{{choice.option_value}}"
/> {{choice.orig_option_txt}}
</li>
$scope.somethingSelectedInTheGroup = function (is_required, choices) {
if(is_required) {
for(var i = 0; i < choices.length; i++) {
var choice = choices [i];
if(choice.selected) {
return true;
}
}
return false;
} else {
return false;
}
}
Note: i originally had used <div ng-if="questionform.$dirty && questionform[currentquestion2.question_code].$invalid">
but that doesn't work out for multiple checkbox questions per form/page.
I am editing User Form. I send the data from controller to the edit view using $scope object for editing form. The data is look like this:
$scope.changeUser = [
{
id: 1,
username: 'Ramesh',
password: 'Ramesh1#23',
role: 'admin',
active: 'no'
}
];
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
When edit form get {{changeUser.action}} than, I have to checked the radio button accordingly. As like when action=='no' the radio button with name no should be automatically checked as we did using checked value=no in the html. I have to write the ng-if conditions seeing the action value.
You are missing the index of changeUser array in your ng-model.
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="yes" />
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="no" />
No
</label>
</div>
</div>
</div>
See the Plnkr
Can anyone tell me why my validation is being ignored?
Here is my form:
<form name="contactForm" role="form" ng-submit="controller.submit()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && !contactForm.fullName.$pristine }">
<input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<input class="form-control" type="text" name="email" placeholder="Email address" ng-model="controller.model.email" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.phoneNumber.$invalid && !contactForm.phoneNumber.$pristine }">
<input class="form-control" type="text" name="phoneNumber" placeholder="Phone number" ng-model="controller.model.phoneNumber" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.orderQuantity.$invalid && !contactForm.orderQuantity.$pristine }">
<select class="form-control" name="orderQuantity" ng-model="controller.model.orderQuantity">
<option disabled selected>Order quantity</option>
<option>10+</option>
<option>20+</option>
<option>30+</option>
<option>40+</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.country.$invalid && !contactForm.country.$pristine }">
<input class="form-control" type="text" name="country" placeholder="Country" ng-model="controller.model.country" required />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message" ng-model="controller.model.message"></textarea>
</div>
<div class="form-group">
<div class="recaptcha" theme="dark" vc-recaptcha key="'6Lcc0AgTAAAAAIpcEqqDI3Ko8dZ05H-GGgUnfOvA'"></div>
</div>
<div class="form-group">
<button class="btn btn-primary">Send</button>
</div>
</form>
I set up a codepen here:
http://codepen.io/r3plica/pen/XbzyzQ?editors=101
you should check whether form is submitted or not using contactForm.$submitted.
After form submission the formController object is get updated and various parameter of each controll's model are get updated and then you can validate your data.
you have not checked this in your form validation.
The updated html is
<div class="container" ng-app="validationExample">
<div class="row" ng-controller="ValidationController as controller">
<form style="margin-top: 20px;" name="contactForm" role="form" ng-submit="controller.submit()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && contactForm.$submitted }">
<input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && contactForm.$submitted }">
<input class="form-control" type="email" name="email" placeholder="Email address" ng-model="controller.model.email" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.phoneNumber.$invalid && contactForm.$submitted }">
<input class="form-control" type="tel" name="phoneNumber" placeholder="Phone number" ng-model="controller.model.phoneNumber" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.$submitted && contactForm.orderQuantity.$invalid && contactForm.orderQuantity.$error.required }">
<select class="form-control" required name="orderQuantity" ng-model="controller.model.orderQuantity">
<option disabled selected>Order quantity</option>
<option>10+</option>
<option>20+</option>
<option>30+</option>
<option>40+</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.country.$invalid && contactForm.$submitted}">
<input class="form-control" type="text" name="country" placeholder="Country" ng-model="controller.model.country" required />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message" ng-model="controller.model.message"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
Here is the updated code codepen
Also instead of $invalid you can use required to validate the fields.Also you can use regular expression to put your custom validation rule.
e.g.
<input name="first_name" class="form-control" required type="text" ng-model="NewUser.first_name" ng-pattern="/^[A-Za-z]+[0-9]*$/" />
<span ng-show="newuser.first_name.$error.pattern">This is not valid <b>Last name</b></span>
Actually the validation is not ignored. In your codepen code, input whatever text and remove to empty. Then switch to another input element. The has-error class is added.
Because you are checking through $dirty, which is by default false if you do not alter any input text (https://docs.angularjs.org/api/ng/type/form.FormController):
$dirty boolean
True if user has already interacted with the form.
I added ng-minlength=5 to your code: http://codepen.io/anon/pen/xGPmqR:
<div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && contactForm.fullName.$dirty }">
<input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required ng-minlength=5 />
</div>
As you input any text, the ng-minlength rules is working.
I have the following HTML, I need to require a radio selection. Not sure how to do it in AngularJS.
<div class="form-group">
<label class="control-label pull-left"><small>Type of M (<i>check one</i>):</small></label>
<div class="col-md-5 pull-left">
<label class="radio-inline pull-left">
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep"> PrRep
</label>
<label class="radio-inline pull-left">
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd"> LProd
</label>
</div>
<div class="input-group col-md-3">
<div class="input-group-sm">
<label><small>Prod LNum</small></label>
<input type="text" class="form-control" id="provProdLNum" ng-model="m.pr.prodLNum" ng-required="m.pr.MType != 'PrRep'" />
</div>
</div>
</div>
I've tried this:
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep" required> PrRep
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd" required> LProd
and this:
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep" ng-required="m.pr.MType != ''"> PrRep
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd" ng-required="m.pr.MType != ''"> LProd
Not sure which is the correct one to use here...
Use ng-required. In your first example, the permanent presence of the required attribute on all the radio buttons within a group will result in the form not validating.
Validate Radio Button AngularJS