I have a modal which comes up with a form, in there is a section which appears when a button is clicked.
In the hidden section I have the following 2 radio buttons:
<label class="radio-inline">
<input type="radio" ng-model="vm.CreateChild" name="inventoryType" value="false" />Parent
</label>
<label class="radio-inline">
<input type="radio" ng-model="vm.CreateChild" name="inventoryType" value="true" />Child
</label>
When a radiobutton is selected i'm able to see the vm.CreateChild values are set, where i'm having an issue is when the modal is closed I set the vm.CreateChild to "",
vm.CreateChild = "";
However, when the modal appears and I click that button, the last selected radio button is still selected. i'm not sure why it does that, as the value when I debug is '', is there another way to do this? i would like to clear it at a certain point.
UPDATE:
I checked, it was a css framework issue, the framework was wrapping a <span class='checked'> around the radio buttons when they were checked. So angular was working fine with unselecting the buttons, but that span was making it look like it was always checked.
Try using
vm.CreateChild = angular.copy({});
Sometimes I have faced issue with deep copying or setting a value.
Related
I create a list of radio button selections, but the problem is that when clicked, they both remain selected, thus not working as a radio button group at all.
I have the same ng-model (a string; 'model') and ng-change for all of them, but the id is different.
<div class="radio-button"
ng-show="vm.forAdmins"
ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)" >
{{role.name}}
</div>
Been wrestling with this for a while now, can't see what I've missed.
Radio button will work as a group if you assign name property to those radio buttons. I was also facing this issue then I realized my mistake.
<div class="radio-button" ng-show="vm.forAdmins" ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)"
name="roles" >
{{role.name}}
</div>
Try assigning a name attribute to your radio button. name groups the radio button. For example :
<input type="radio" name="someRadio" id="radioOne" />
<input type="radio" name="someRadio" id="radioTwo" />
Now only one is selected at a time.
Using AngularJS & Ui-router.
Problem scenario:
I have a set of fixed radio button on 10 over pages with
Daily, Weekly , Monthly and Yearly.
Toggling the radio button above will do a state.go which will set the state params to the value of the radio button selected (using ng-change, ng-model).
Current code which I duplicated on every page.
Now I would like to create an AngularJS Component for those radio buttons.
<div>
<label>
Daily
<input type="radio" ng-model="dateModel" value="Daily" name="radioDateType"
ng-change="SetDateTypeOption(dateModel)">
<span class="checkmark"></span>'
</label>
<label>
WTD
<input type="radio" value="WTD" ng-model="dateModel" name="radioDateType"
ng-change="SetDateTypeOption(dateModel)">
<span class="checkmark"></span>
</label>
</div>
This is a simplified plunker (Not working) but you can see what i'm trying to achieve.
First - I'm unable to even get the radio button to show despite already using a template.
Second - If it's able to show, I want it to show an alert when I toggle between the radio buttons (This is a test that the ng-change is working)
Lastly - I'll need to implement $state.go on every ng-change.
https://plnkr.co/edit/N5CDz0ZBhSG1leq3Hiw2?p=preview
The reason it's not loading is because you're not bootstrapping your app. Just add the ng-app directive to body. Everything else is correct.
See updated link: https://plnkr.co/edit/P34c6im4ojUI69sQDfhh?p=preview
I'm generating a group of radio buttons options from a JSON object which is requested when another radio button is selected. This works as expected but the form validation is not working correctly since the form only becomes valid if all the options in the radio button group are first clicked.
My mark-up for the radio button:
<div data-ng-repeat="option in options" class="radio">
<label>
<input type="radio" name="decline_type_id" ng-model="decline_type_id" value="{{option.id}}" ng-required="!decline_type_id" />
<strong>{{option.name}}</strong>
</label>
</div>
Here is my plunker:
https://plnkr.co/edit/B7KgUt4GMrnSATYIQuN5?p=preview
The same mark-up without the loop works as expected, so I don't understand what it is about the loop used to generate the list that is breaking the validation of the form until all options are selected?
This is a Angular scoping issue. The ng-model inside the ng-repeat is using a child scope.
The ng-model="decline_type_id" was unique for each iteration of the loop. So ng-required check was for each unique model.
You can make use of $parent scope to do the ng-required checking on a shared variable instead.
<input type="radio" ng-model="$parent.decline_type_id" value="{{option.id}}" ng-required="!$parent.decline_type_id" />
Is there a way to inject some validation - custom or otherwise - that isn't tied to a form element? Like - validate that some condition is met, but have it work with standard AngularJS validation?
Update:
Here's what I'm trying to accomplish:
I have a form contains a list of sections. Each section is controlled by a checkbox, and the section will display (via an ng-if) when the checkbox is checked.
Within each section, there's an opportunity for an item to be selected via a popup modal that is activated by a button click. Until an item is selected for that section, the form needs to be invalid. Once an item is selected for each selection that is checked, then the form needs to be valid.
I have a button at the bottom of the form with an ng-disabled="frm.$invalid". I want that to stay disabled until each section that has been checked contains an item that was selected via the modal.
Update 2:
Here's some example code:
<form class="form-horizontal" role="form" name="frm" novalidate>
<label>Name: </label>
<input type="text" ng-model="name" required/>
<div ng-repeat="orderItem in orderItems">
<input type="checkbox" name="items[]" ng-model="orderItem.selected"/>
<div ng-if="orderItem.selected">
... bunch of form fields
<button ng-click="openExchangeSelectionModal(orderItem)">Select Item</button>
<div ng-show="orderItem.exchange_item">
Selected Item: {{orderItem.exchange_item.name}} - ${{orderItem.exchange_item.price | number: 2}}
</div>
</div>
</div>
<button ng-disabled="frm.$invalid" ng-click="submitOrder">Submit</button>
</form>
Checking if the form is valid won't help you in this case since there is no required input that's not being filled.
What I would recommend is that the disable button would call a function that makes some logic about the number of check boxes expanded and the number of selected items and returns the buttons state (true for active otherwise false)
Let's take the example code you put up:
//some html tags...
<button ng-disabled="checkValid()" ng-click="submitOrder">Submit</button>
</form>
Notice that I changed the frm.$invalid to checkValid function, which is a function that is defined on your controller and can perform any logic you want to determine rather show your submit button or not.
Here is my radio buttons code
<input type="radio" ng-model="choice.phone" ng-value="1" name="phone" ng-
click="setPhoneType('cell')"> cell phone<br/>
<input type="radio" ng-model="choice.phone" ng-value="2" name="phone" ng-
click="setPhoneType('Home')"> Home phone <br/>
Now when a user choose any of them then below radio button should be checked as default
<input type="radio" ng-model="choice.International" ng-value="1"
name="international" ng-click="setChoiceType('Inter')" ng-checked="choice.phone"> International call
The js code is as follow:
setPhoneType = function setPhoneType(phoneType) {
$scope.phone = phoneType;
$scope.setChoiceType('Inter');
return;
},
setChoiceType = function setChoiceType(callType) {
$scope.international = callType;
return;
},
The problem is that when I choose any phone then the Inter is checked automatically but later on the value is undefined, It goes to setChoiceType but after that choice.International is undefined. If I manually choose Inter (by clicking on it) it is fine.
Your radio buttons are bound to properties of the choice object. But, setPhoneType and setChoiceType update values directly on the scope - not the choice object. Also, I think you want to use value, not ng-value.
Here is plnkr.