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;
Related
I my angular application, I'm using a reset button to clear the data in a text box. But the binding is not working properly with the reset button.
<form>
<input type="text" name="email" ng-model="ch.email"><br>
<input type="reset" value="Reset">
</form>
<div>{{ch.email}}</div>
When some text is typed in the text box, it appears in the div, But after resetting, The text in the div doesn't disappears.
Please see the fiddle
You can use a button instead
HTML:
<form>
<input type="text" name="email" ng-model="changestore.sample">
<br>
<input type="button" value="Reset" ng-click="reset()">
</form>
<div id="textdisplay">
{{changestore.sample}}
</div>
JS:
$scope.reset=function(){
$scope.changestore={};
}
Working Fiddle:http://jsfiddle.net/aks0kmwe/
HTML 5 reset button won't clear the ng-model, it clears only the value from the input box
Working Example:http://jsfiddle.net/ADukg/12591/
HTML5 Reset button will only clears the input control values but not the angular ng-model values that doesn't mean it is refreshing the page but it resets html form fields to their initial values. Here is working example
Html:
<form>
<input type="text" data-ng-model="name" />
<span data-ng-bind="name"></span>
<input type="reset" value="Reset" />
</form>
Script:
var myApp=angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.name="Angular JS";
})
When you click on reset button it will clear textbox but not span tag value.After this you try to access name property value of scope using angular.element($0).scope() by doing inspect element on browser and it is still "Angular JS" only.
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.
<input type="text" name="input" ng-model="email" placeholder="Email ID"/>
<!--input text box which value is send when click event fire.-->
<button type="submit" id="Button1" ng-click="sendBtnForgotPswd(email)" />
</form>
I don't want to fire click event when input "email" is undefined. Any in built filter provide by AngularJS for prevent click event*
You have at least two possibilities here. Probably optimal one is to use ngDisabled directive to deactivate button when email is empty:
<button ng-disabled="!email" ng-click="sendBtnForgotPswd(email)"
type="submit" id="Button1" >Send</button>
Other option is to call sendBtnForgotPswd function only when email is filled in:
<button type="submit" id="Button1" ng-click="email && sendBtnForgotPswd(email)">Send</button>
Also note that button tag cannot be self-closable so you should add closing </button>.
Use ng-disabled="!email" on the button element.
I have a form field that upon clicking enter or pressing save the field saves. What I'd like to have happen in addition to this is for field to save when the user clicks anywhere else on the page.
<input type="text" id="location" ng-model="location" ui-keypress="{enter: 'editLocation = !editLocation'}" class="ng-pristine ng-valid">
<a ng-click="editLocation = !editLocation" title="Click here or press the "Enter" key to save this edit.">
<i class="icon-ok"> Save</i></a>
What'd be the best way to achieve this using AngularJS?
Using the "onBlur" event from javascript ? http://www.w3schools.com/jsref/event_onblur.asp
<input onBlur="myfunctionToSave()" ...>
Enter ngBlur.
http://docs.angularjs.org/api/ng.directive:ngBlur
<input ng-blur="saveStuffOnLeave()">
I am new to AngularJS.
In the following fiddle, when user clicks on "This submit triggers validation. But I wanted to put this button at the end of the page" button. I could see alert/error but I want to show a custom message, which I am struggling to do it.
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="triggerSubmit()">Wanted this submit to trigger the validation to the form on which this button doesn't belong, e.g. trigger to header</a>
js fiddle link
http://jsfiddle.net/unWF3/6/
Thanks,
Kalyan Basa
To disable native browser validation add novalidate attribute to form element:
<form novalidate submit-on="myEvent" ng-submit="onSubmitted()">