I am currently learning angularJS and read about ng-pristine and ng-untouched directives for angular forms.
I am having trouble conceptually differentiating between these two directives, to me they seem to be one and the same by their definition.
For reference, here is how angular defines these directives:
ng-untouched: the control hasn't been blurred
ng-pristine: the control hasn't been interacted with yet
With my logic, I think that an element that is untouched implies that it is an element that is pristine and vice versa.
This is mostly because usually the only type of interaction I have programmed with form elements have been blurs.
What are some other types of "interactions" that one could imagine for a form control other than blurring it?
Suppose you have a text field in your form and you navigate through it using your tab key. As soon as you leave the field, it's not untouched anymore. But since you haven't entered or removed any character in the field, it's still pristine. The other types of interaction are the main ones: entering a value, select an option, etc.
Related
I'm currently maintaining an AngularJS application and need to have html inputs use the ngRequired directive. However these inputs do not use ngModel-- just straight up value to display the value dynamically and ngClick to popup a modal window that will eventually set the value in an object that is not bounded to a model. Seems like ngRequired only works when paired with ngModel in order for the submit button to reflect changes appropriately (like enable/disable).
I tried to work around not using ngRequired by manipulating the ngInvalid CSS which works great for showing the required fields-- however it does not bubble up to the submit button (disabling it if one or more required fields have no input). Is there a way to emulate ngRequired without using it explicitly in AngularJS?
I have a form with some tabs.Each tabs has set of some controls which are binded using angularjs and has ng-model .I want to check whether user has entered or modified any data in a particular tab during submit.
myForm.$dirty will check whether user has interacted with the form. But I need to check controls are filled in particular tabs and give some appropriate messages . So can i check angularjs watch or ng-dirty for each controls and verify that user has modified data. Is there any other good solution for the same?
In angularjs you can make very different validations when using forms and classes like ng-dirty and ng-touched.
This way u can check wether determined control has been modified.
ng-dirty: the control has been interacted with
ng-touched: the control has been blurred
Also you can check validity or other similar things.
U have all the docs at:
https://docs.angularjs.org/guide/forms
Anyway, you can also check this with the FormController
https://docs.angularjs.org/api/ng/type/form.FormController
And then show the messages with angular directives for bootstrap (see Modals)
https://angular-ui.github.io/bootstrap/
As you say, you have different controls and you need to show different messages depending on the control and on the user´s input. Then I think the way you musts code it, is by looking for ng-dirty or ng-touched
There you have an example about how using it:
http://www.w3schools.com/angular/angular_validation.asp
Hope it can help!!
We have inputs with placeholders like this:
<input placeholder="Search..." type="text" />
Everything is fine in chrome/firefox, but in IE sometimes when we are hiding and showing the element, the placeholder becomes the input value -- you click on the input and your cursor is after the 3 dots of
"Search...(blinking cursor here)"
The inputs are in an angularJS ngView and we use ngShow and ngHide to show/hide them based on various logic.
When the view first renders you can click in the input and it removes the placeholder as expected, but after the input is hidden and then shown once or twice the problem starts.
We have even tried recreating the browsers html5 placeholder behaviour with javascript, binding to its blur/focus events and using the inputs value but we actually get the same behavior attempting doing them that way too.
We originally tried to use a placeholder.js thinking it was related to IE 8 or less not being great with html5... but we get this issue in up to IE11 as well.
I know there is a $setPristine() function for the form element, is there an equivalent if I want single to set to ng-pristine single element tags like <input>?
The concept of pristine applies to a form as a whole and not to individual elements. A pristine form is one which has not yet been modified while a dirty form is one that has been changed. There are no semantics of flagging a input element unrelated to a form as pristine and for input elements in a form, the pristine flag applies solely to the form.
I would like to have a directive for my validation messages that takes the name of the form input being validated and then displays itself if the named form input is invalid. For the sake of good UI, I want this to only happen after the input is blurred. Here's a Plunkr: http://plnkr.co/edit/qLSsCHpAPLdZsCPG8iaf
Obviously, ctrl[attr.tgValidates] isn't giving me an object I can bind to (although it is referencing the correct field), but I'm not sure how to properly select the element I do want. jqLite doesn't have great support for selectors, so it's a tricky to do what I want without pulling in all of jQuery. I guess I could also pull in $document and select off that, but I'm wondering if there's a better, more Angular way to approach this?