I have a text box and two radio button controls with yes or no value. If I click on Yes, the text box should be enable and it should be disabled on No selection. I have used ng-disabled property.
But, if user selects No, saves the file and reopens it, the text box is getting enabled again. Is there a way to save the text box state?
I have tried using disabled="" on textbox. but if user selects yes, enters some value and saves the files, the textbox is getting disabled again. if user selects Yes, the textbox should not be disabled till he selects No
I am talking about index.html file.
Below is my chunk of code:
<input type="radio" name="something" value="1" ng-model="checkboxSelection"/>Checkbox 1
<input type="radio" name="something" value="2" ng-model="checkboxSelection"/> Checkbox 2
<input type="text" ng-model="somevalue" name="somevalue" ng-disabled="checkboxSelection=='2'"/>
try this
<input type="checkbox" ng-click="disable = !disable">
<input type="text" ng-disabled='disable'/>
If you want to clear the value of the input after check no, use a function in you're controller
<input type="radio" ng-model="disable_input" ng-value="true" />
<input type="radio" ng-model="disable_input" ng-value="false" />
<input type="text" ng-disabled="disable_input" />
I'm not sure if you want to use and input or textarea as your "textbox" but all you would need to do to make it a textarea instead is use the ng-disabled in the last input element in a textarea instead.
Related
I tried many answers here at Stackoverflow, but none of them working:
<form ng-submit="runIt(cars)">
<input type="radio" ng-model="cars.erp" value="Toyota" ng-required="!cars.erp">Toyota
<br>
<input type="radio" ng-model="cars.erp" value="Nissan" ng-required="!cars.erp">Nissan
<br>
<input type="radio" ng-model="cars.erp" value="Honda" ng-required="!cars.erp">Honda
<br>
<input type="radio" ng-model="cars.erp" value="Other" ng-required="!cars.erp">Other
<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="!cars.other">
<br>
<input type="submit">
</form>
It all starts working only after typing a value in Other. Apparently, this is due to hidden input, but this is how it should work:
A value must be submitted,
If Other selected, value must be typed.
Here's the fiddle: http://jsfiddle.net/ADukg/17426/
To reproduce:
Run
Select Toyota
Click Submit
See Console in Inspect
The reason for the specific error you're getting of "invalid form control with name='' is not focusable" is because the browser wants to focus on the form element that is required(the text input), but the element is not visible.
<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="!cars.other">
You're saying that the text field is only required if cars.other evaluates to false. In other words, you're saying that the text field is required whenever it isn't filled out. What you actually want is for the text field to be required if cars.erp is set to other.
<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="cars.erp=='Other'">
Your text field's ng-model is cars.other and then you are checking for ng-required="!cars.other" which isn't right. You are requiring the text field with it self. Instead it should be dependent on the value of the radio button. Something like ng-required="cars.erp=='Other'".
I have updated the JSFiddle here -> http://jsfiddle.net/d0o29hb2/3/. Hope this helps.
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;
Suppose I have the following setup:
<form>
<input type="text" id="text1">
<input type="text" id="text2">
</form>
In AngularJS, is there any way for me to determine when, say, the user deselects #text1, for example by clicking #text2, or clicking somewhere else on the screen? I am aware the ng-change lets me listen to changes in the value of #text1 itself, but I see no way to determine when the user actually leaves the field.
You can use ngBlur for this
https://docs.angularjs.org/api/ng/directive/ngBlur
<form>
<input type="text" id="text1" ng-blur="iHaveLostFocusDoSomethingWithIt()">
<input type="text" id="text2">
</form>
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.