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>
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.
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.
I have two text boxes. If the first contains text, then the second must not be empty.
Can I set up angularJS form validation to cover this use case?
below is an example assuming that both fields are text fields.
<input type="text" ng-model="input.field1">
<input type="text" ng-model="input.field2" ng-required="angular.isDefined(input.field1) && input.field1.length > 0">
This code example will check if the model of the first input-box is empty, if it is then the second input-box is required.
<form>
<input type="text" data-ng-model="first"/>
<input type="text" data-ng-model="second" data-ng-required="angular.isDefined(first)"/>
<button type="submit">Submit</button>
</form>
I have inputs in a web page without the form tag (useless to me).
How can I get their validity status inside the HTML ? This
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">
doesn't work.
I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.
<form name="myForm">
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myForm.myInput.$valid">
</form>
Should work.
If you're unable to use the form tag for any reason, you'll have to wire that up manually.
I'm using AngularJS and have a form where I want the Submit button to be disabled if some fields are not filled in.
The standard way seems to be the following:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" ng-model="form.name" required>
<input type="submit" ng-disabled="myForm.name.$invalid">
</form>
http://jsfiddle.net/YMSRU/
However, if I omit the model from the input field the validation doesn't work and I don't need any models on my input fields (I submit my form using the ngUpload directive so it's actually sent to the form action in an iframe).
Is there any solution or should I add random models just to make the validation work? It seems like a bad work-around.
You could simply do the invalid check at the form level, then no need to define a model for each input:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" required>
<input type="submit" ng-disabled="myForm.$invalid">
</form>
You are missing your model at your test input tag : ng-model="form.name"