I have a form that has a radio button group and the values are ng-value = true they are all their own entity on the model I have to work with and if a user selects one then changes their mind it still remain true. How can I make this false if deselected in an angular way?
I have a plnkr of the situation plunkr
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTNS"
id="minorTns"
name="earthArrangements" />
<strong> TN-S</strong>
</label>
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTNCS"
id="minorTncs"
name="earthArrangements" />
<strong>TN-C-S</strong>
</label>
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTT"
id="minorTt"
name="earthArrangements" />
<strong>TT</strong>
</label>
<label class="radio-inline">
<input type="radio"
id="minorOther"
name="earthArrangements"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArOther"
data-ng-change="vm.minorWorks.earthArSpecify = vm.minorWorks.earthArOther ? vm.minorWorks.earthArSpecify : ''" />
<strong>OTHER</strong>
</label>
You could possibly add a function to the checkboxes, ng-click="checkState(model)"
and in .js
$scope.checkState = function(model){
if(model) { // if model = true
model = false; //set model to false
}
}
Related
At first, all checkboxes are checked.
Then i'm just checking 2 of them and press search.
Checkboxes and Search-Button:
<input type="checkbox" id="stat2" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check2" />
<label for="stat2">Status 2</label>
<br />
<input type="checkbox" id="stat3" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check3" />
<label for="stat3">Status 3</label>
<br/>
<input type="checkbox" id="stat1" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check1" />
<label for="stat1">Status 1</label>
<br />
<input type="checkbox" id="stat4" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check4" />
<label for="stat4">Status 4</label>
<br />
And then a new page (new URL) is loading, on this page there is a 'back' button.
When i press the back button, i'm getting back to the first page, and alle 4 checkboxes are selected again, how can i make it possible, that only the ones are checked, which i checked first?
Back-Button
<div class="btn-group container panel-footer">
<button type="button" onClick="history.go(-1);return true;" class="btn">Back</button>
</div>
Use $rootScope for maintaining your data:
$rootScope.checkState = {
check1: true,
check2: false,
check3: true,
check4: false
};
And then in your view:
<input type="checkbox" id="stat2" ng-true-value="true" ng-false-value="false" ng-model="$root.checkState.check1" />
(Do this for all your checkboxes with the according field)
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
I'm having issues with getting the radiogroup field to work in a ng-repeat.
I have a set of form fields that are repeating:
<div ng-repeat="rpt in repeatables.REPEATGRP">
<input ng-required="false" name="text1" ng-readonly="false" type="text" ng-model="rpt.data.text1" id="text1" value="" />
<label for="radio1_1" class="radio-inline">
<input ng-required="true" name="radio1" type="radio" ng-model="rpt.data.radio1" id="radio1_1" value="1" /> Yes
</label>
<label for="radio1_2" class="radio-inline">
<input ng-required="true" name="radio1" type="radio" ng-model="rpt.data.radio1" id="radio1_2" value="0" /> No
</label><br/><br/>
</div>
The form data is initiated like this, with 2 sets of fields:
$scope.repeatables = {
REPEATGRP: [
{data:{text1: "test 1", radio1: 1}},
{data:{text1: "test 2", radio1: 0}}
]
};
But the 2 radio groups are behaving like they are linked to each other. It's hard to describe, but you can see it in action here: http://plnkr.co/edit/y4pCt0IsDTD8BzeA8SWZ?p=preview
One solution to don't alter the object, just add the $index variable that is part of the ng-repeat to the name of the input.
<input ng-required="true" name="radio1-{{$index}}" type="radio" ng-model="rpt.data.radio1" id="radio1_1" value="1" /> Yes
Based on your Plunker, here is working:
http://plnkr.co/edit/5KeyBrzLqzAIXrPxIoig?p=preview
just add a property name to your repeteables and set it in your radio buttons.
What it's happening is that as all of them have the same name, the browser groups them as if they are just one set of radio buttons :
(I changed also the id, so you don't have the same id repeated).
HTML:
<label for="radio1_1" class="radio-inline">
<input ng-required="true" name="{{rpt.name}}" type="radio" ng-model="rpt.data.radio1" id="{{rpt.name}}_1" value="1" /> Yes
</label>
<label for="radio1_2" class="radio-inline">
<input ng-required="true" name="{{rpt.name}}" type="radio" ng-model="rpt.data.radio1" id="{{rpt.name}}_2" value="0" /> No
</label>
SCOPE
$scope.repeatables = {
REPEATGRP: [
{data:{text1: "test 1", radio1: 1,name:'r1'}},
{data:{text1: "test 2", radio1: 0,name:'r2'}}
]
};
I am using the following piece of code for selecting the first option for radio button, but somehow it doesn't seem to work
<label class="radio inline">
<input type="radio" ng-value="true" name="smsEnabled" ng-model="contactNumberArray.smsEnabled1" ng-checked="true">Yes
</label>
<label class="radio inline">
<input type="radio" ng-value="false" name="smsEnabled" ng-model="contactNumberArray.smsEnabled1">No
</label>
Can someone suggest some work around for this ?
Hi in your controller you have to set default value for contactNumberArray
please see here: http://jsbin.com/dafoj/1/edit
JS:
$scope.contactNumberArray ={
smsEnabled1 : true
};
HTML:
<label class="radio inline">
<input type="radio" ng-value="true" name="smsEnabled" ng-model="contactNumberArray.smsEnabled1" ng-checked="true">Yes
</label>
<label class="radio inline">
<input type="radio" ng-value="false" name="smsEnabled" ng-model="contactNumberArray.smsEnabled1">No
</label>