Is there a angular (1.4+) way with ng-messages to show warnings and errors the difference being that warnings don't make the form invalid but the errors do so the user can save the form even though there are warnings?
Searched all over and can't seem to find anything about this though I think it should be an obvious part of the system o_O
Judging from the Ng-Messages Docs I don't believe that is possible.
When you include the ng-messages onto an html element they will hide or show that element based on the $error object in the form field. You can create custom errors if you like, but if triggered they will always make the form invalid.
To get around this you could write something to watch a user's input and have a bootstrap warning message set to conditionally appear if the conditions are met, but not have that be in any ng-messages html element.
You can do that, by monkey-patching object that you are listening in ng-messages and show corresponding message when your custom property changed.
Related
Ok, I have a form with several inputs in it. The validation of the inputs happens after the submit event. I would like to test each field on isolated tests, but I wouldn't like to fill all other fields in each isolated test to do that validation.
What I would like it's a way to hide the fields that I'm not testing in each isolated test.
If you would like to keep test file short, then what about setting default values for all inputs in beforeEach(), and setting specific values in it()
Hiding will not help, you would have to remove
cy.get('element-to-be-removed').then($el => $el[0].remove)
But this feels like a bad really idea. If your validation code references the element, it will throw an error.
Hiding avoids that problem, but the validation code will still look for a value in the hidden element.
So what really is the problem with filling in all the fields except for the one you are testing?
I am new to AngularJs and I know that I can use $dirty , $pristine, $ error in form validation. However is it necessary to explicitly create a form in
<form>..</form>
to use these properties ?
Hi since you are new to Angualar js nothing is better to start from the maker itself. As Sathish said AngularJsDocumentation is very good.
To answer your question is Yes you have to create a form explicitly because these are the properties of the form.
To understand the form better you can go to this link http://mrbool.com/the-concepts-of-angularjs-forms/29117
is it necessary to explicitly create a form
The answer to that is no.
While using a form tag is very helpful for creating sets of input tags to process as a whole (usually by sending to a server) it is not necessary for angular's purposes.
You can easily use the ng-form directive as an attribute on other tag types (not just form).
From the source code you can see that if you are using the form tag or ng-form as Element, Attribute or Class you will get the same behavior
restrict: isNgForm ? 'EAC' : 'E'
link
When my field becomes invalid, is there a way to fire a method in my js?
So for example, the user fails to fill out the name field, clicks submit, I want to:
console.log('they forgot');
Thanks
There is a $error object made available by AngularJS. This object contains all of the validations on a particular form and tells if they are valid or invalid.
To get access to this property, we can use the following syntax:
formName.inputfieldName.$error
Here is a jsfiddle sample
This document is a good reference for understanding form-validations using AngularJS.
Also, for dealing with custom validations, you can add your own directives. A sample of making such directives is given in the link above.
I am trying to have angular validation on my page.
I have a plunkr here that shows a normal select that behaves the way you would expect. It starts off not selected, when you select an option and then go back to the blank option, the error shows up:
http://plnkr.co/edit/SEgsPRaRCjVnpV0PGxJf?p=preview
However, if I change that to a ui-select2, it automatically makes it dirty and shows the error message on load. Any thoughts on a workaround for this? thanks in advance!
This is a known problem with angular-ui and select2.
Seems like it has been resolved, but I never got it working.
In my case I just moved to chosen.js.
I found this post and after some small changes I ended up with the following directive:
https://gist.github.com/royts/5894780
It is working great and not marking the form as dirty after initialization , and it looks better (you can still see the chosen options but they are great, line wrapping looks better).
I'm stuck with strange problem regarding AngularJS form validation. If a dynamically added control (a textbox, for instance) requires validation and is removed from the form, the form will remain invalid if the removed control was invalid.
That last sentence is a bit confusing. See it in action with this plnkr preview (or see the plnkr editor).
I've checked the FormController API. Based on the documentation, there's no method to provoke any kind of form validation status refresh, although the AngularJS source code defines methods like $removeControl() and $setValidity() in the FormController.
Is there a standard way to circumvent the validation issue?
I came across this before, see this answer for more detail: https://stackoverflow.com/a/15192773/317180
Apparently this is an active bug.
A workaround is to provide a hidden counter that is incremented when elements are changed, this forces the form to revalidate:
In template:
<input type="hidden" ng-bind="abc" />
In controller:
$scope.remove = function(position) {
$scope.items.splice(position, 1);
$scope.abc += 1;
}