Plunker
How can i make yes radio button to be checked on page load and show/hide the field-set accordingly. Currently on load radio button is checked but its not showing the fieldset.
Html
<form name="myform" class="form " novalidate >
<fieldset>
<span>Would you like a receipt sent to you?</span>
<ul class="vList">
<li>
<input type="radio" name="receiptConfirmation" id="receiptAffirm" ng-model="reciept" value="yes" ng-checked="true">
<label class="form__radioLabel" for="receiptAffirm:" >Yes</label>
</li>
<li>
<input type="radio" name="receiptConfirmation" id="receiptDeny" ng-model="reciept" value="no">
<label class="form__radioLabel" for="receiptDeny">No </label>
</li>
</ul>
</fieldset>
<fieldset class="fieldset" ng-show="reciept=='yes'">
<legend class="isVisuallyHidden">Email Receipt</legend>
<ul class="vList">
<li>
<label for="firstName" class="form__label">First Name</label>
<input id="Text4" class="form__input form__input--textfield" type="text" >
</li>
<li>
<label for="emailAddress" class="form__label">Email Address</label>
<input id="email1" class="form__input form__input--textfield" type="email">
</li>
</ul>
</fieldset>
</form>
Do not mix ng-checked with ng-model. Setting ng-checked will not update the model, it will just update the element's checked property. Instead set the ng-model reciept to the desired value.
Remove ng-checked from input:-
<input type="radio" name="receiptConfirmation" id="receiptAffirm"
ng-model="reciept" value="yes">
In your controller set the model:-
app.controller('MainCtrl', function($scope) {
$scope.reciept = "yes";
});
Demo
Just set $scope.reciept = 'yes'; in your controller?
You have spelt receipt wrong also.
Related
In the example above, the radio buttons below the checkbox are activated when the checkbox is checked. I'd like to reset the radio buttons (so that no radio button is filled) when unchecking this checkbox.
<div class="checkbox checkbox-info">
<input id="icb" type="checkbox" ng-model="checked">
<label for="icb"><i class="fa fa-refresh"> </i><b>Integratie</b></label>
</div>
<div class="radio">
<input type="radio" name="irb" id="iarb" ng-disabled="!checked" value="!checked">
<label for="iarb">Administrator</label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-disabled="!checked" value="!checked">
<label for="imrb">Medewerker</label>
</div>
Change radio button value to ng-model
HTML
<div class="checkbox checkbox-info">
<input id="icb" type="checkbox" ng-model="checked" ng-click="onCheck()">
<label for="icb"><i class="fa fa-refresh"> </i><b>Integratie</b></label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-model="radio_checked" value="1" ng-disabled="!checked" />
<label for="iarb">Administrator</label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-model="radio_checked" value="2" ng-disabled="!checked" />
<label for="imrb">Medewerker</label>
</div>
JS
$scope.onCheck = function(){
$scope.radio_checked = false;
}
Demo Fiddle
I am trying to create a dynamic form with multiple radio button options and get selected values..
<form name="myForm" ng-submit="sendAnswers(question)">
<ul>
<li ng-repeat="question in questionForm.questions">
<p>{{question.description}}</p>
<ul>
<li ng-repeat="option in question.options">
<input type="radio" ng-model="question.answer" value="option.value">
{{option.value}}
</li>
</ul>
</li>
</ul>
<p><input type="submit" value="sendAnswers"></p>
</form>
Problem is as I click on button, both options get selected..what am I doing wrong here?
Live example: http://plnkr.co/edit/aStk4SCHzAW0AKQuH7JE?p=preview
Thanks in advance!
Add a "name" parameter:
<input name="{{question.description}}" type="radio" ng-model="question.answer" value="option.value">
Also, you need to change "value" to {{option.value}}
<input name="{{question.description}}" type="radio" ng-model="question.answer" value="{{option.value}}">
Working Example
I am trying to disable a group of element using ng-disabled in its parent element. Doesn't seem to work.
Does it mean I have to using same condition in all child element to disable ?
I am not able to disable all elements by putting ng-disabled="true" with ul or li element. It works only when I put at input element. Is this how it works ? Also ng-disabled="true" doesn't work with lable or span !
<ul style="list-style:none">
<li>
<input type="radio" id="radio1" ng-model="color" value="red">
<label for="radio1" class=""><span>Red</span></label>
</li>
<li>
<input type="radio" id="radio2" ng-model="color" value="green">
<label for="radio2" class=""><span>Green</span></label>
</li>
<li>
<input type="radio" id="radio3" ng-model="color" value="blue">
<label for="radio3" class=""><span>Blue</span></label>
</li>
fiddle : http://jsfiddle.net/chiranjib_halder1/pqvz9veu/3/
You can use this directive:
https://github.com/pleerock/angular-disable-all.git
that basicaly picks the elements inside the directive and disable them.
here is your fiddle code using this directive:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://cdn.rawgit.com/pleerock/angular-disable-all/master/dist/angular-disable-all.min.js"></script>
<body ng-app="radioExample">
<script>
angular.module('radioExample', ['disableAll'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="isDisabled">Disable all<br>
<ul style="list-style:none" disable-all="isDisabled">
<li>
<input type="radio" id="radio1" ng-model="color" value="red">
<label for="radio1" class=""><span>Red</span></label>
</li>
<li>
<input type="radio" id="radio2" ng-model="color" value="green">
<label for="radio2" class=""><span>Green</span></label>
</li>
<li>
<input type="radio" id="radio3" ng-model="color" value="blue">
<label for="radio3" class=""><span>Blue</span></label>
</li>
<tt>color = {{color | json}}</tt><br/>
<button type="button">Click Me!</button>
</ul>
</div>
</body>
ng-disabled is used on input elements only. here, "checked" is used to enable the button after the checkbox has been checked. here is a hypothetic example:
Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
<button ng-model="button" ng-disabled="checked">Button</button>
https://docs.angularjs.org/api/ng/directive/ngDisabled
How to validate checkbox with different ng-model??
For e.g:
My HTML looks like:
<form name="myFrm">
<ul>
<li><input type="checkbox" ng-model="sunday" />Sunday</li>
<li><input type="checkbox" ng-model="monday" />Monday</li>
<li><input type="checkbox" ng-model="tuesday" />Tuesday</li>
<li><input type="checkbox" ng-model="wednesday" />Wednesday</li>
<li><input type="checkbox" ng-model="thursday" />Thursday</li>
<li><input type="checkbox" ng-model="friday" />Friday</li>
<li><input type="checkbox" ng-model="saturday" />Saturday</li>
</ul>
<p ng-if="myFrm.$invalid">Atleast one day should be selected</p>
</form>
from the above code, i want to check atleast 1 checkbox should be selected OR give error message.
I've tried searching, but i found the solution in which has a same ng-model, but i have different ng-model for each checkbox.
How to do that??
DEMO JS FIDDLE
Try creating custom directives to do custom validation:
//This directive is to update Form validity when any of the elements decorated
// with customRequired is not empty.
app.directive("customRequiredContainer",function(){
return {
restrict:"A",
require:"form",
controller:function($element,$scope){
var properties = []; //store the list of properties to check.
//customRequired will register the property to be checked.
this.registerProperty = function(property){
if (properties.indexOf(property) === -1){
properties.push(property);
$scope.$watch(property,function(value){
if ($element.form){
//If any of the elements is checked, Form is valid otherwise not valid.
for (var i=0;i<properties.length;i++){
if ($scope[properties[i]]){
//we should use $setValidity(),
//I don't know why it does not work, check that later.
$element.form.$invalid = false;
$element.form.$valid = true;
return;
}
}
$element.form.$invalid = true;
$element.form.$valid = false;
}
});
}
};
},
link:function(scope,element,attrs,formController){
element.form = formController;
}
}
});
//This directive is to decorate which element should be checked for validity
app.directive("customRequired",function(){
return {
restrict:"A",
require:"^customRequiredContainer",
link:function(scope,element,attrs,containerController){
containerController.registerProperty(attrs.ngModel);
}
}
});
HTML:
<form name="myFrm" custom-required-container>
<ul>
<li>
<input type="checkbox" ng-model="sunday" custom-required/>Sunday</li>
<li>
<input type="checkbox" ng-model="monday" custom-required/>Monday</li>
<li>
<input type="checkbox" ng-model="tuesday" custom-required/>Tuesday</li>
<li>
<input type="checkbox" ng-model="wednesday" custom-required/>Wednesday</li>
<li>
<input type="checkbox" ng-model="thursday" custom-required/>Thursday</li>
<li>
<input type="checkbox" ng-model="friday" custom-required />Friday</li>
<li>
<input type="checkbox" ng-model="saturday" custom-required />Saturday</li>
</ul>
<p ng-if="myFrm.$invalid">Atleast one day should be selected</p>
</form>
DEMO
Or this:
<form name="myFrm">
<ul>
<li>
<input type="checkbox" name="sunday" ng-model="sunday" required/>Sunday</li>
<li>
<input type="checkbox" name="monday" ng-model="monday" required />Monday</li>
<li>
<input type="checkbox" name="tuesday" ng-model="tuesday" required />Tuesday</li>
<li>
<input type="checkbox" name="wednesday" ng-model="wednesday" required />Wednesday</li>
<li>
<input type="checkbox" name="thursday" ng-model="thursday" required />Thursday</li>
<li>
<input type="checkbox" name="friday" ng-model="friday" required />Friday</li>
<li>
<input type="checkbox" name="saturday" ng-model="saturday" required />Saturday</li>
</ul>
<p ng-if="myFrm.sunday.$error.required&&myFrm.monday.$error.required
&&myFrm.tuesday.$error.required&&myFrm.wednesday.$error.required
&&myFrm.thursday.$error.required&&myFrm.friday.$error.required
&&myFrm.saturday.$error.required">Atleast one day should be selected</p>
</form>
DEMO
Explanation:
By giving the inputs names: name="sunday", angular will add the input name as a property of the form: myFrm.sunday. From then, we can check whether the input is selected using its $error.required property.
Or this:
<form name="myFrm">
<ul>
<li>
<input type="checkbox" ng-model="sunday" />Sunday</li>
<li>
<input type="checkbox" ng-model="monday" />Monday</li>
<li>
<input type="checkbox" ng-model="tuesday" />Tuesday</li>
<li>
<input type="checkbox" ng-model="wednesday" />Wednesday</li>
<li>
<input type="checkbox" ng-model="thursday" />Thursday</li>
<li>
<input type="checkbox" ng-model="friday" />Friday</li>
<li>
<input type="checkbox" ng-model="saturday" />Saturday</li>
</ul>
<p ng-if="!sunday&&!monday&&!tuesday&&!wednesday&&
!thursday&&!friday&&!saturday">Atleast one day should be selected</p>
</form>
DEMO
I need to make a system to change the total price by number of tickets selected. I created some radio buttons to choose the number of ticket. The ploblem is that the default value is unset and the result is null on loading.
<input type="radio" ng-model="people" value="1" checked="checked"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
Please see my jsfiddle.
Set a default value for people with ngInit
<div ng-app>
<div ng-init="people=1" />
<input type="radio" ng-model="people" value="1"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
</div>
Demo: Fiddle
<div ng-app="" ng-controller="myCntrl">
<input type="radio" ng-model="people" value="1"/><label>1</label>
<input type="radio" ng-model="people" value="2"/><label>2</label>
<input type="radio" ng-model="people" value="3"/><label>3</label>
</div>
<script>
function myCntrl($scope){
$scope.people=1;
}
</script>
why not just ng-checked="true"
In Angular 2 this is how we can set the default value for radio button:
HTML:
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gender"
[(ngModel)]="gender" id="optionsRadios1" value="male">
Male
</label>
In the Component Class set the value of 'gender' variable equal to the value of
radio button:
gender = 'male';
<input type="radio" name="gender" value="male"<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>: "checked='checked'" %> >Male
<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>