<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.
Related
<form role="form" id="myForm" name="myForm">
<input class="form-control" ng-model="firstName" type="text" />
<input class="form-control" ng-model="lastName" type="text" />
<button class="btn btn-info" ng-disabled="myForm.$pristine">cancel</button
<button class="btn btn-primary" ng-disabled="myForm.$pristine">update</button
</form>
Assume that there is a list of data in a table.
When I click a data, a modal will pop up with data on it(in the example the firstName and lastName).
Inside the modal there’s an EDIT button that when u click it, two other buttons will appear -- CANCEL and UPDATE. I want to set the update button to disabled while there is no changes yet happening in the FORM.
By using $pristine I found a solution, but there’s one problem:
When I try to edit the data and decide to cancel it (by resetting the current data), the next time I click EDIT the UPDATE button is already enabled even though there are no changes to the data yet.
Is there any solution for this?
On cancel set the form to pristine. This will set $pristine back to true which should disable the buttons.
<button class="btn btn-info" ng-disabled="myForm.$pristine" ng-click="myForm.$setPristine()">cancel</button
For cancel buttons I add a function in the controller to reset all fields and then set the form back to pristine which effectively resets the form.
I want an error message to appear if the user clicks submit with no content, and I want the submit button to be disabled.
I can get either one working, but not both at the same time.
The code below brings up the message but allows an empty todo item.
<form name="todoForm" novalidate >
<div ng-messages="todoForm.new.$error" ng-if="todoForm.$submitted"><div ng-message="required">Add Your Item Below...</div></div><!--message appears until valid input is entered-->
<input type="text" name="new" placeholder="start typing..." autofocus data-ng-model="newTodo" required=""/>
<button input type="submit" ng-click="addTodo()" >Add To List</button><!--disables form if form not valid-->
</form>
This version disables the submit button but doesn't bring up the message
<form name="todoForm" novalidate >
<div ng-messages="todoForm.new.$error" ng-if="todoForm.$submitted"><div ng-message="required">Add Your Item Below...</div></div><!--message appears until valid input is entered-->
<input type="text" name="new" placeholder="start typing..." autofocus data-ng-model="newTodo" required=""/>
<button input type="submit" ng-click="addTodo()" data-ng-disabled="todoForm.$invalid" >Add To List</button>
</form>
I presume this is because the message can't be displayed when the input button is disabled because nothing has been submitted?
I've tried using $disabled and $invalid instead but they haven't worked.
I removed the conflicting ng-if on the ng-message element. Here is a working plunk showing the fixed code.
http://plnkr.co/edit/gL0GoFT47mSeydKReLuD
My assumption is that you forgot to inject the 'ngMessages' module as an external dependency.
You can fix your code like this:
var app = angular.module('plunker', ['ngMessages']);
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;
Live Demo
Consider the following form:
<form>
<div>
<label>Status: </label>
<button ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id" btn-radio="status.id">
{{ status.name }}
</button>
</div>
<div>
<label>Name: </label>
<input type="text" ng-model="job.name">
</div>
</form>
When focus is on the name field, and Enter is hit, Status is set to "All Good" for some reason. Live Demo
Why is this happening? How could I stop this side effect?
From the ngForm docs:
This is because of the following form submission rules in the HTML
specification:
If a form has only one input field then hitting enter in this field
triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit]
then hitting enter doesn't trigger submit
if a form has one or more input fields and one or more buttons
or input[type=submit] then hitting enter in any of the input fields
will trigger the click handler on the first button or
input[type=submit] (ngClick) and a submit handler on the enclosing
form (ngSubmit)
Default type for the button element is "submit" (<button></button> === <button type="submit"></button>). Hence, when you hit enter, the first button is submitted.
To remedy, just put type="button" on your buttons.
<button
ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id"
btn-radio="status.id"
type="button"
>
{{ status.name }}
</button>
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()">