I have a form with three radio buttons, and deferred binding to model on click of submit. Live example here
This works perfectly fine in the happy path scenario:
Select radio1 > click submit gives radio1 as the result.
But in the following scenario it breaks:
Select radio1 > click submit > gives radio1
Now select radio2 > then radio3 > and then click submit.
This gives radio2 instead of radio3 as the bound value.
Basically, if I make multiple changes to the radio group, only the first change gets captured. How can I change this behaviour to reflect the last change instead?
You have to use allowInvalid : true in ngModelOptions to validate correctly instead of the default behavior of setting the model to undefined. See documentation.
<input type="radio" name="radio" value="radio1" ng-model="radioValue" ng-model-options="{updateOn: 'submit', allowInvalid : true}" >
<input type="radio" name="radio" value="radio2" ng-model="radioValue" ng-model-options="{updateOn: 'submit', allowInvalid : true}">
<input type="radio" name="radio" value="radio3" ng-model="radioValue" ng-model-options="{updateOn: 'submit', allowInvalid : true}">
Working Plunker Link
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.
I have the below code to select Yes\No for selecting the options from Multi Select dropdown. But It is required only when I select the Yes Option from radio. Otherwise the validation message should disappear when I move from Yes to No. (I am disabling the Multi Select in script when the user selects the No optio)
<input id="Option1" name="MyRadio" ng-model="MyRadioData" type="radio" title="Yes" value="Yes" ng-click="Flip('Yes')" />Yes
<input id="Option2" name="MyRadio" ng-model="MyRadioData" type="radio" title="No" value="No" ng-click="Flip('No')" />No
<select id="MultiSelect1" kendo-multi-select name="MultiSelect1" k-value-primitive="true" k-max-selected-items="30" k-placeholder="multiPlaceHolderVendor"
k-ng-model="MyOptions" k-data-source="MyOptionsDS" ng-required="MyRadioData == 'Yes'" validationmessage="Required"></select>
<span data-for="MultiSelect1" data-role="validator"></span>
But the above code is not working though I have used ng-required option for multi select.
Appreciate any help.
If <span data-for="MultiSelect1" data-role="validator"></span> is where messages put, you can handle with ng-show ng-hide like this:
UPDATE
<!-- if you choose no it hide-->
<span ng-hide="MyRadioData == 'No'" data-for="MultiSelect1" data-role="validator"></span>
<!-- if you choose yes it hide-->
<span ng-hide="MyRadioData == 'Yes'" data-for="MultiSelect1" data-role="validator"></span>
Here is a plnkr with a button but it does the same, i will help you how this work.
new in angular here.
I have an input field disabled base on the radio button, if the radio button was selected, I first want the input field value to null and then disabled it.
Here is my current example:
<input type="radio" ng-model="vm.radio" value="selected" /> Sample
<input type="text" ng-model="vm.input" ng-disabled="vm.radio='selected'" />
When input have the value, it just disabled and keep the input value.
I can do check inside the controller like
if(vm.radio=='selected') { vm.input = null }
But it only work when I active the function via the button. Is there any good way to handle it at HTML page, on the change event? Not in a controller script.
take a look at this plnkr: https://plnkr.co/edit/IygRaPlBmLzdnI0jhAQn?p=preview
You can use ng-change specifying an expression
<input type="radio" ng-model="vm.radio" value="selected" ng-change="vm.radio === 'selected' ? vm.input = '' : '' " /> Sample
<input type="radio" ng-model="vm.radio" value="b" /> Sample2
<input type="text" ng-model="vm.input" ng-disabled="vm.radio === 'selected'" />
I'm trying to disable a input field as soon as submit button is click. The angular way suggest this:
here button is disabled when check box is checked. same way I need to disable the input field when I click button.
<input type="checkbox" ng-model="check"> </input>
<input type="checkbox" ng-disabled="check">Checkbox to be disabled</input>
IJust set/reset the variable triggering disabled on input field in the click event of button:
Search : <input ng-model="query" ng-disabled="isDisabled" />
<button ng-click="isDisabled = true;">Name</button>
JSFiddle : http://jsfiddle.net/4YtLu/108/
<input type="checkbox" ng-disabled="isDisabled">Checkbox to be disabled</input>
in your controller, on submit set
$scope.isDisabled=true;
How do a force a a radio box to be be checked value in jquery mobile?
I think it has to do with class=ui-btn-active.
<input type='radio' name='myradio' id='radio-choice-1' value='1' /><label for='radio-choice-1'>Station 1</label>
<input type='radio' name='myradio' id='radio-choice-2' checked value='2' /><label for='radio-choice-2'>Station 2</label>
<input type='radio' name='myradio' id='radio-choice-3' value='3' /><label for='radio-choice-3'>Station 3</label>
I'm not sure what you mean by 'force' - are you asking how to programatically change the state of a radio button? With jQuery Mobile, you must refresh the radio button after updating it's attribute in order for it's UI to be updated. From the docs:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Also note that with HTML4, boolean attributes such as disabled and checked take their names as values when enabled. So simply putting in checked is not valid but must be checked='checked' instead.