Hi I have a form with some inputs like email, title, color...
I have 2 buttons "Save" and "Undo changes".
I need that this buttons will be always disabled accept, if something was changed.
For example I started to change email and then I considered. While I'm typing new email buttons should be enabled, but after click on one of them they should be disabled again.
<form name="form" ng-submit="change()" novalidate>
<input type="text" ng-model="title"/>
<input type="email" name="email" ng-model="email" placeholder="{{email}}" />
<input type="color" ng-model="color"/>
<button type="submit" ng-disabled="!form.$dirty">SAVE</button>
<a ng-click="cancel()" ng-disabled="!form.$dirty">UNDO CHANGES</a>
</form>
How can I make them disable again after click on one of buttons?
Call $scope.form.$setPristine() to cancel all the dirty flags:
function TodoCtrl($scope) {
$scope.change = function() {
$scope.form.$setPristine();
}
$scope.cancel = function() {
$scope.form.$setPristine();
}
}
Example: http://jsfiddle.net/ej5et0f5/1/
Simply create a flag variable that you'll set to true after submitting and to false after changing inputs, then just do:
<button type="submit" ng-disabled="flagVariable">
Related
I have a form which when I submit, I reinitialise it as the form has been submitted. I then show a message and stay on the same page.
However, the form's fields come up with the error messages as the form has been "touched".
Demonstrated below:
I have read some articles about how to go around this but none are working for me.
My HTML:
<form name="newPost" ng-submit="makeNewPost()">
<div class="form-group">
<input name="title" maxlength="46" minlength="2" type="text" class="form-control" ng-model="post.title" required="required">
<div ng-messages="newPost.title.$error" ng-if="newPost.title.$touched">
<div class="errorMessage" ng-message="required">Title is mandatory *</div>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-success" id="submit">
My controller code to reset the data:
var resetData = function(){
$scope.post = {};
};
resetData();
Of course there are more fields but to solve the problem, just this simple code will demonstrate it.
Any input will help. Thanks chaps!
Your resetData function should be:
$scope.resetData = function(){
$scope.post = {};
$scope.newPost.$setUntouched();
$scope.newPost.$setPristine();
}
where newPost is form name & $setUntouched, $setPristine will make form pristine just like initially loaded. Call this function in the end of submit function.
I need to disable the submit button after clicking on the button to prevent multiple submissions but before the it has to ensure that the required fields are filled.
I tried
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<form name="newUserForm">
<input type="text" required>
<input type="text" required>
<input type="text">
<button ng-click="disableClick()" ng-disabled="isDisabled"
ng-model="isDisabled">Disable ng-click</button>
</form>
</div>
</body>
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.isDisabled = false;
$scope.disableClick = function() {
alert("Clicked!");
$scope.isDisabled = true;
return false;
}
}]);
but this will only disable the button without any validation
Ok, I get what you mean/want so I'll try to help and come up with some code - which is obviously missing but if it wasn't missing the necessary code, you'd have the solution :)
First, you'll have to properly write your form:
<form name="newUserForm" ng-submit="disableClick(newUserForm.$valid)" novalidate>
<input type="text" name="input1" ng-model="form.input1" required>
<input type="text" name="input2" ng-model="form.input2" required>
<input type="text" name="input3" ng-model="form.input3"> //not required
<button type="submit" ng-disabled="isDisabled">Disable ng-click</button>
</form>
so what we've got here, which you're missing:
You did name your form, but you're missing a submit, in the form as ng-submit or the button with type="submit", which will submit the form and that's when the validation happens
In order for Angular to validate your inputs, they need to have ng-model, otherwise it will not validate (HTML5 validation would, but read on)
I've added novalidate so we tell the browser "Hey, we need this validated but not by you, so do nothing", and Angular takes over
And last but not least, Angular adds a couple of properties to the form (see more here: Angular form Docs), $valid being one of them, which is set to true when all validated inputs are valid.
So this sums up the changes you needed to do to your form.
As for the Javascript part, there is just one small change:
$scope.disableClick = function(valid) {
if(valid && !$scope.isDisabled) {
$scope.isDisabled = true;
}
return false;
}
I guess the change is obvious, but I'll explain anyway - check that newUserForm.$valid (boolean) and if it's true (meaning form has passed validation) disable this button.
Of course, you'll have to add checks not to run the code on any type of submits and not just disabling the button (which can easily be re-enabled via Dev Tools), so that's why I added !$scope.isDisabled to the if statement.
Hope this answers your question :)
P.S. Here's a running demo in Plunker
I’m using a library called floating-tabs.js which is being used to create floating navigational buttons: here’s an example of what the layout looks like
<floating-tabs>
//this is my button
<floating-tabs-item icon="ion-android-arrow-dropright-circle" click="goNext(data)"></floating-tabs-item>
</floating-tabs>
<ion-content>
<form name=“formName” ng-submit="goNext(data)">
***form stuff
</form>
</ion-content>
How can I submit/validate the form without having my button inside the form tags
Thanks guys
here i am using simple change password form.
<form name="changepasswordform" novalidate>
<input type="password" placeholder="New Password" class="reset-inputs" name="newpassword" ng-keyup="compare()" ng-model="changePassword.newpassword" maxlength="10" required/>
<span style="color:red" ng-show="submitted && changepasswordform.newpassword.$error.required">Required</span>
</form>
<button type="button" class="reset-submit" ng-click="changepassword(changepasswordform.$valid,changePassword)">Change Password</button>
it consist button out side the form
and please use the script in your controller
$scope.submitted = false;
$scope.changepassword = function(formValidStatus, formdata) {
if (!formValidStatus) {
$scope.submitted = true;
} else {
$scope.submitted = false;
}
}
in the script i am checking form is valid or not if form is not valid i am showing error messages by using submitted variable from script.
This works for me
I'm building a form and within that form is a secondary function that I wish to run. However, when I click the button for my secondary function, backbone fires and runs validation over the whole form. How do I either:
a) Make Backbone ignore that specific button and do nothing when it's clicked
or
b) (Preferred) Tie Backbone validation to only the form submit button or the button type "submit".
Example:
<form name="myForm" >
<input type="text" name="yourName" ng-model="yourName" required />
<input type="text" name="postcode" ng-model="postcode" required />
<button id="checkPostcode" type="button" >Check Postcode</button>
<button id="submit" type="submit" >Submit</button>
</form>
In this case, I only wish Backbone to run validation when the submit button is pressed, so that I can run my checkPostcode function without interference.
Thanks :)
You should add an eventListener to the button and prevent the default. Something like this:
var view = Backbone.View.extend({
events: {
"click #checkPostcode": "checkPostcode"
},
checkPostcode: function(event) {
event.preventDefault();
// the actual check would go here
}
});
In the following example, message is undefined when I display it in the controller after the event is fired. Why?
<form>
<input type="text" ng-model="message.Title" />
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-click="sendMessage(message)" />
</form>
Controller:
$scope.sendMessage = function(message) {
console.log(message);
}
My code seems identical to the documentation here except my controller manages the entire "page" not just the form.
Wow nevermind, apparently when you submit with blank values it doesn't even create the object.
I see you've found your problem, but I'd like to propose a solution to prevent your problem anyway:
<form name="messageForm" ng-submit="sendMessage(message)">
<input type="text" ng-model="message.Title" required/>
<span ng-show="messageForm.title.$error.required && messageForm.title.$dirty">required</span><br/>
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-disabled="messageForm.$invalid" />
</form>
The above will make the Title required, display an error message, and disable your submit button if the form isn't valid.