I am actually developing a Cordova application with AngularJS (1.5.11). I am facing a really strange bug with iOS which I don't have with Android (same code).
I removed all unneeded information from the form to reproduce the bug (classes, directives, extra divs...) and the bug is still there :(
Here is the form:
<form method="post" ng-submit="$ctrl.login()">
<input type="email" name="username" value="" required ng-model="$ctrl.username">
<input type="password" name="password" value="" required ng-model="$ctrl.password">
<button type="submit">Submit</button>
</form>
My form is submitting even if it is invalid. It is a basic login form with two fields (login, password) and a button.
Just for information, every form in my app is affected by this bug.
Did I miss something?
Thanks for your help :)
You have 3 options
1.- Disable the submit button if the form is invalid:
<form name="needNameForm" method="post" ng-submit="$ctrl.login()">
...
<button type="submit" ng-disabled="needNameForm.$invalid">Submit</button>
</form>
2.- Ignore the submit if the form is invalid:
<form name="needNameForm" method="post"
ng-submit="needNameForm.$valid && $ctrl.login()">
...
</form>
3.- Check validity in your submit method:
<form name="needNameForm" method="post"
ng-submit="$ctrl.login(needNameForm)">
...
</form>
<!-- for testing purposes you can use this line below -->
<pre>{{needNameForm | json}}</pre>
In your controller:
angular.controller('name', function(){
var vm = this;
vm.login = function(formController){
if(formController.$valid){
doStuff();
}
}
}
with this 3rd option you will have more control if you want to validate each input in your form, the formController object will have all info for each input, and also you will require to add a name to the inputs so you can get full info about them, here is all the info about it: https://docs.angularjs.org/api/ng/type/form.FormController
Related
I have the following code:
<form>
<input type="email" id="login_email" required>
<input type="submit" value="Sign in" ng-click="signIn()">
</form>
The problem with above code is that signIn() method gets called even if there is an email validation error from HTML5 side. In general how to ensure that signIn() method gets called only when all the input validation of the form are successful?
Use $pristine to find out if the form is empty, and $invalid to find out if the form is populated but has invalid values (maybe an incorrect email, for example).
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
</form>
So now your submit button will be disabled (not clickable) until your form is valid.
EDIT
In order to validate only with HTML5 validation, add a name attribute to your form and you can access the validity of it during submission:
<form name="myForm">...</form>
$scope.signIn = function(){
if ($scope.myForm.$valid){
// do sign in logic here
}
}
Maybe even inline the logic on your submit button (if it works):
<input type="submit" value="Sign in" ng-click="myForm.$valid && signIn()">
So signIn would only be called if the first part was true.
EDIT 2
Based on the information found on the AngularJS docs here, can you try the following as well?:
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="signIn()">Save</button>
</form>
$scope.signIn = function () {
if ($scope.myForm.email.$error.required) {
// ...
}
};
We are now following the $scope.myForm.email.$error.required syntax approach.
Try logging $scope.myForm or $scope.myForm.email and see what you get as you modify the value.
I have a a HTML form. I have added required tag against each input fields for which I require it to be filled. I am using $<form-name>.<input.field.name>.$error in AngularJS to check for errors during submission and apply error class to those fields.
Is there a way to prevent HTML5 validation popup retaining the required attribute at the same time?
You need the novalidate attribute.
<form novalidate>
...
</form>
Form's novalidate attribute on MDN
You can show your error message inside dirty condition of angular js and not on submission. Try like this:
<span style="color:red" ng-show="$<form-name>.<input.field.name>.$dirty && $<form-name>.<input.field.name>.$invalid">
<span ng-show="$<form-name>.<input.field.name>.$error.required">Name is required.</span>
</span>
This will show error message on focus out only. And on submit, default HTML5 required field error message will be shown.
You have to put novalidate at your form element:
<form novalidate>
<input type="text" required>
<button type="submit">Save</button>
</form>
My code looks something like this -
<form name="myForm" ng-submit="!myForm.phone.$isEmpty(this.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>
Now I can't submit the form even if I fill the phone number field.
But if I code like this :
<form name="myForm" ng-submit="!myForm.phone.$isEmpty(myForm.phone.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>
Its perfectly working now.
So the difficulty is with 'this'. I cant even check the context of this, it should be the the context of $scope.myForm.phone, but somehow it isn't. Can someone please explain.
That's not what ng-submit is for. ng-submit is a function or expression called when the form is submitted. It's nothing to do with validation. If you want to ensure the text field is not empty before it's submitted you just need to add required and then if it is empty myForm.$invalid will be true.
Is this what you are trying to do:
html
<form name="myForm" ng-submit="submit(phone)">
<input name="phone" type="text" ng-model="phone.value" required>
<button type="submit" ng-disabled="myForm.$invalid" >submit</button>
</form>
controller
$scope.submit = function(phone){
console.log('phone', phone);
}
$scope.phone = {
value: ''
};
update
The this that you passed into the ng-submit is a reference to your controller. Since you have the name attribute set to myForm you can access the form model via this.myForm and the phone model via this.myForm.phone. So if you wanted to use $isEmpty to verify if the field is empty you would have to use:
this.myForm.phone.$isEmpty(this.myForm.phone.$viewValue)
ng-submit is used to provide a handler for the moment when the form IS submitted.
What you're looking for is disabling submit button with ng-disabled
<form name="myForm" ng-submit="functionInController()" action="/my/url" method="get">
<input name="phone" required>
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
</form>
Pay attention to required directive added to the input. Which makes sure this field is not empty for submit
I've written a form with Angular.js that requires a field to be filled out before it is submitted. The validation works correctly (the field shows a validation error when I submit the form) but the form still seems to perform its ng-click action.
Are angular forms supposed to submit despite validation errors? What's the best way to prevent it from submitting if there are validation errors?
Here's the form in question:
<form role="form">
<div class="form-group">
<label>Book Id</label><br>
<input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
</div>
<button type="submit" ng-click="sendBookUpdate(BookToSend)">Send Book Update</button>
</form>
Angular doesn't prevent forms from submitting when there are validation errors.
Actually with the snippet you pasted, the errors are shown just because by default error validation is provided with html5.
You should check the docs: https://docs.angularjs.org/guide/forms
Basically you have to name your form:
<form name="myForm" role="form">
and then you can prevent your form from submitting inside your controller with:
$scope.sendBookUpdate(BookToSend, form) {
if (form.$invalid) {
return; // and add any error to the view if you want
}
...
}
another option is to prevent submitting from the view:
<form name="myForm" role="form" ng-submit="myForm.$valid && sendBookUpdate(BookToSend)">
You could disable the button until the form has valid data
<button type="submit" data-ng-disabled="form.$invalid">Send Book Update</button>
EDIT:
When I wrote the answer below, I was under the assumption that the ngClick was completely separate from any form submission handlers that angular uses. I was wrong, however, as shown in the comments below. I'll keep this answer up, despite its inaccuracy, to inform those that come here with the same misunderstanding as I had, since, to me at least, it's kind of counter-intuitive to have an ng-click double as a submit handler.
ng-click is separate from the form's submit handler, and will run every time you click the button regardless of whether or not it passes the validation checks.
The solution to your problem would be to take sendBookUpdate(BookToSend), and place it in an ng-submit attribute on the form itself. See the code below:
<form role="form" ng-submit="sendBookUpdate(BookToSend)">
<div class="form-group">
<label>Book Id</label><br>
<input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
</div>
<button type="submit">Send Book Update</button>
</form>
Let me know if that helps.
Edit:
Here's some more info regarding ngSubmit:
https://docs.angularjs.org/api/ng/directive/ngSubmit
I'm relatively new to AngularJS and I am trying to sumbit a regular form. I have basic form that looks like this:
<form method="post" enctype="multipart/form-data">
input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="" />
<input type="file" name="post_image" />
<input type="submit" class="btn btn-success" value="Create Post" />
</form>
But I noticed that AngularJS adds its own values to the form.
<form method="post" enctpye="multipart/form-data" class="ng-pristine ng-valid">
And I am ununable to submit the form. How can I disable the automatic validation that Angular JS is adding to the app?
Quoted from the documentation:
For this reason, Angular prevents the default action (form submission to the server) unless the element has an action attribute specified.
IMHO, you should read the doc to gain some general understanding of single page application, and the reason why angular's preventing the default behavior.
UPDATE : This does NOT work ... well at least not in a way you'd like it to. Adding ng-non-bindable to the form or any input breaks ALL binding. So, your ng-model in the inputs won't work anymore.
ng-non-bindable is possibly your best choice. It will prevent AngularJS from doing ANY validation. So, you'll be responsible for showing invalid and checking validity.
https://stackoverflow.com/a/19387233/75644