After submitting the form, the pristine state of the input is still "false". I don't know how to reset the pristine state to be true. In Angular 1, I would use the $setPristine function.
I looked at the API and developer guide. There is no API to reset input to pristine.
Instead developer guide on forms (section "Add a hero and reset the form"), shows a mechanism to reset form to pristine by adding a active flag on the component. And then binding it on form tag with ngIf
active = true;
newHero() {
this.model = new Hero(42, '', '');
this.active = false;
setTimeout(()=> this.active=true, 0);
}
and
<form *ngIf="active">
This regenerates the form, setting its controls back to pristine.
There is a pull request waiting to be added https://github.com/angular/angular/pull/6679
See also this related issue https://github.com/angular/angular/issues/4933
The usually used workaround is to recreate the form.
Related
I'm able to find form data is changed or not using $dirty.
ex: I changed text box or drop down and then $dirty become true. If I reverted to old data still it is true. I need to know if my changes are reverted or not. Do we have any property in Angularjs? If property is true I want to enable save button otherwise it should be disable.
https://docs.angularjs.org/api/ng/type/form.FormController
I need to implement around 10 pages and each page has 10 text boxes and a couple of drop downs. So I don't want track each control manually in my pages.
You can try using this module: https://github.com/betsol/angular-input-modified
From the README file:
This Angular.js module adds additional properties and methods to the
ngModel and ngForm controllers, as well as CSS classes to the
underlying form elements to provide end-user with facilities to detect
and indicate changes in form data.
This extra functionality allows you to provide better usability with
forms. For example, you can add decorations to the form elements that
are actually changed. That way, user will see what values has changed
since last edit.
Also, you can reset an entire form or just a single field to it's
initial state (cancel all user edits) with just a single call to the
reset() method or lock new values (preserve new state) just by calling
overloaded $setPristine() method.
DISCLAIMER: I haven't tried it myself and I notice the author overwrites the ngModel directive instead of adding a decorator, which could be dangerous...but at the very least, you can look at the source and get an idea of how to write your own service or directive with similar functionality.
Even though it does not follow the usage of $dirty, but an implementation similar to this might be helpful for you in the case of a Save button on update.
Inside your html:
<form name="testForm" ng-controller="ExampleController" ng-submit=" save()">
<input ng-model="val" ng-change="change()"/>
<button ng-disabled="disableSave">Save</button>
</form>
Inside your controller:
.controller('ExampleController', ['$scope', function($scope) {
$scope.disableSave = true; // Keep save button disabled initially
$scope.val = 'Initial'; // Initial value of the variable
var copyVal = $scope.val; // Copy Initial value into a temp variable
$scope.change = function() {
$scope.disableSave = $scope.val === copyVal;
};
$scope.save = function() {
// Save the updated value (inside $scope.val)
console.log($scope.val);
// Re-disable the input box (on successful updation)
copyVal = $scope.val;
$scope.disableSave = true;
};
}]);
Here is a working plunkr for the same.
I have a login form that has a username and password. Both are required to trigger other form elements.
However, in chrome if the password is saved, form.$invalid returns true and the digest doesn't re-run when the saved information gets added. Is there any way to require fields being saved and set by the browser and have angular re-check form.$valid?
Surprisingly, I was facing a similar problem some time back. The trick is to get the browser to fire input events for things that may have been filled in by chrome autofill (but haven't updated).
If you have a submit or click handler for the form submission, you can trigger the input event on all your inputs so that angular will pick up the changes by autofill.
You may do something like this
var app = angular.module('app',[]);
app.run(function() {
// Trigger input event on change to fix auto-complete
$('input, select').on('change',function() { $(this).trigger('input'); });
});
to fire input event on all inputs.
Here's the original github issue related to your problem.
I am using angular.js version 1.1.5 which has $setPristine on the form controller. But this method does not seem to clear any errors associated with fields. The code below works for me, but I am not sure whether this is the right way to clear errors. Any advice?
In my controller:
if ($scope.myform) {
$scope.myform.$setPristine();
delete $scope.myform.myfield.$error.myvalidator;
}
The $setPristine() clears only the flag dirty in a form but the validation in a form are cleared with $setValidity()
There's one field in the form which has strict format (validator is already in place).
How to make form submit automatically in AngularJS as soon as it becomes valid?
I am assuming you are talking about ajax post of form data (model data).
You can do a $watch on the $valid property of a form field and submit the form as soon as it becomes true.
See my fiddle here
Something like
$scope.$watch('myForm.userName.$valid',function(newValue,oldvalue) {
if(newValue) {
alert('Model is valid');
//Can do a ajax model submit.
}
});
You can get mode details from the form directive documentation
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;
}