Is it possible to get all the forms from the $scope and set them to prestine?
Up to now I have been setting the prestine state using the form name, e.g.
$scope.coachingSessionFrm.$setPristine()
the setPrestine() method removes the dirty flag so that the state of the form elements are now considered clean right? Only after a change after prestine will they be dirty?
Related
The fact that ng-change is only for user input, and does not fire when changes are made to the model programmatically, is really causing me a headache today. I'm working with a user input form which has the separate parts of a name, as well as dynamically built and ordered credentials. The form has a "displayName" field that gets updated when the name parts are changed. This is encapsulated in a directive which I need to use in a larger view. Here's where things get hairy. I need to hide the name part fields in my directive and use the outer form's name fields. I thought this would be easy by wiring up a function to update the hidden text input fields, and thus my displayName field. Then I found out programmatic changes to the model do not fire the change event.
I tried creating a watch for one of the name fields to see if I could get it to update the displayName field, but no luck.
this.scope.$watch('provider.firstName', function (event) {
namePropertyChanged2(displayNameOverridden, displayName, provider, credentials);
});
When I change the input field for firstName, it modifies the directive's value 'provider.firstName', and runs the 'namePropertyChanged2' function. The code listed runs in an initialize function, where 'displayName' is a local variable assigned from this.scope.provider.displayName. The watch assignment required me to make local variables instead of passing in controller variables. Not sure why, but whatever. So this function runs and 'displayName' is updated with the correct value... and the input field it's bound to is not updated. Bummer.
What would be ideal is to manually trigger the change event when the model changes, which would update the displayName and much rejoicing to be had.
I have a form with multiple fields that the user can alter. I need to keep track of the state of the field and only allow the user to save if the value is changed. Now it looks like $dirty is set to true the moment when the value is altered even if it were changed back to the original value. Is there any way to use $dirty or something similar to be true only if the value is changed from it's original value?
*edit: okay it doesn't seem like it's possible with built in functions. Would I be better off storing all the original values? I'd avoid using $watch.
Angular FormController doesn't have any property you can use to achieve this. $dirty can only tell you if user has already interacted with the form. You have to watch the value and 'manually' check if it has changed.
use $pristine No fields have been modified yet
What's a good way to solve this?
I have a list of items on user's view. Each item could be expaned - only one at a time. (I'm using Angular Bootstrap Accordion). In the expanded container I have a password input. The problem is that I'm updating the item list every 20 secs, and the list might be repopulated exactly when the user is entering the password, and everything gets totally messed up.
*Imagine this like a list of WiFi Networks - with continuous scanning.
The problem is, when you rfresh list's model it is detected by directive's (accordion?) watcher which launch a compile, e.g. DOM rbuild of component, so there could be some ways to avoid loss of user's process:
right way (imho) is to move form out of the component whose model refreshes in such way
try to prevent refreshing while user interacts with form
deregister interval/timeout you use to refresh when form(or any of it's fields focused), and set interval back on submit/cancel/blur
try build 'shadow' model and refresh it every 20 seconds, then set watcher to it manually (in this case you will get a watcher deregister function to turn off watcher) and in this watcer refresh model, to which your accordion is linked, so again onfocus you will be able to deregister watcher.
I have used switch-toggle inside ng-repeat. I don't know how to set default value to ng-model when you have multiple switch-toggle in your form and on form submit you need to have all the values. I am very much new to angular world and here is the Example In this example on form load the default value for switch-toggle is shown as "OFF". And if I submit form without making any change to the switch-toggle and check in browser console you can see empty model array. And on making some changes then I get the appropriate values.
So, how can I get all the values of the switch-toggle irrespective I make changes or not. As far as my angularJS knowledge is concern I guess it is related to its model. But how to do it in this case I feel I am lost.
This i believe should be model driven. You should intialize your switchModel, something like this
$scope.switchModel = {1:false,2:true,3:false };
instead of {}
I have this scenario where a field is invalid due to another selection on the form. When that selection changes I want to revalidate. I tried calling $setViewValue on the field when the selection changes, but that doesn't refire the validation. Any ideas?
I have a hack working, but I would prefer a clean solution.
I ran into the same issue and found a workaround/feature that appears to be undocumented. If you need to trigger ngModelController to revalidate, you can either do:
ngModelCtrl.$setViewValue(value, 'your event name', true);
or if you don't need to update your model value
ngModelCtrl.$commitViewValue(true);
The true in both cases above is a flag for revalidation. Without this flag, the issue I was running into was that if the model value does not change, then angular simply skips the validation. I am using this way to manually mark a custom control as $dirty
Source:
https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1843
Write a directive, say validation, and place it on your field in the definition of this directive in the:
link:function(scope,element,args){
element.bind('onfocus',function(){
// Your logic
})
// Similarly, bind other relevant events like key presses, etc.
}
Put a ng-change on your select and broadcast an event in it:
$rootScope.$broadcast("selectChangedEvent");
Then, in a directive you have placed on your field, simply put in the link function:
$rootScope.$on("selectChangedEvent", () => ngModelCtrl.$validate());
$validate runs each of the registered validators of your field.