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?
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 want to perform an action each time a blur event happens on a form group bound control in angular.
I've seen the onBlur validation and it is an option. But I don't want to restrict the form control update events to be blurs. People may leave the cursor in the input and submit the form with a key control.
Something like an event observable where I would get a stream of the events the form group is using to perform its internal controls. Filter on the type (if 'blur') and call my function would be ideal.
Is there anything like this?
Also I don't want to use blur bindings from the DOM elements directly in the template. It would be so much extra work to make and maintain.
Basically in vanilla JavaScript you can register event-listeners to that target element via addEventListener():
var formInputElement = document.getElementById("myForm");
formInputElement.addEventListener("focus", myFocusFunction);
formInputElement.addEventListener("blur", myBlurFunction):
formInputElement.addEventListener("focusin", myFocusFunction);
formInputElement.addEventListener("focusout", myBlurFunction);
These will call your functions passed in as listener (callback function) for the event-type (e.g. myBlurFunction for an event-type identified by blur).
I'm using Ionic framework to create my app.
I have a text input, with ng-model="answer", and bellow a have a button that starts speech recognition and then replaces the input text with the spoken one.
The problem is that I can't change the input's text programmatically when using the mic with $scope.answer="any text", it looks like it just doesn't change the view's value.
I found that I have to use a directive in order to bind the model, but to be honest I don't know how to address it right now.
Also I've tried $scope.$apply() but it works only the first time and when I haven't wrote any test directly to the input yet.
What you are looking for may be Angulars $watch() function, so you can handle any model changes even outside of the input field.
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
I wanted to have a Dialog box for asking to save the current changes or not. For that I was searching for an event in AngularJS which triggers on change of any scope variable.
As per my logic I will achieve this by creating event on every control and update a variable to say 'Modified' else will have default value.
Is there any other way? Since my logic will need an event on every control.
If you're using a form directive, this is pretty simple. The value of myForm.$dirty will be true if any property has changed. You can even check an individual field with myForm.myField.$dirty.
If you're not using a form, you should probably consider it for what it sounds like you're trying to accomplish. One of my favorite angular features as it makes validation, etc. a breeze!
Reference: angular docs
Take a look at $scope.$watch(...) on the Angular docs, there is a great discussion on how $watch works here on another Stack Overflow question
You should, at the very least, be able to trigger alerts when specific scope-elements have changed. If you are using a form, then the $dirty approach above is absolutely a brilliant way to go.
Showing an example will likely make more sense than trying to explain this. Please reference this http://plnkr.co/edit/ipGYEX?p=preview as it ALMOST does exactly what I need.
In the example, click Add to create a new select menu and choose an option. This should add it to the parent form. Currently I'm handling this aspect with an $emit. The core problem is that I can't find a way to assign $index to each select. I'd like to attach it to the model name in order to make each one unique. However, simply doing something like ng-model="selectNum{{$index}} causes an error when passed through attrs.ngModel. As is, the ngModel is repeated for each dropdown that's added and thus, every time the form gets overwritten. I WANT to add each select as a unique object to the form - and update that specific instance should the associated select change.
Can anyone provide some insight on how to either attach the $index or perhaps another way of updating the form?
Not a direct answer to getting the values into the form object, but here's an option similar to something I'm doing for a very similar situation:
http://plnkr.co/edit/uEHFWgRQ9fP2gpeWuE5y?p=preview
Basically storing the values within the elements of the array being repeated on, then I use that object from the model for a post to the server.