Reset form after being submitted - angularjs

Question

I know it has been asked several times and I already read the other questions but my problem still remains. I have a simple form and I want the validation to disappear after being successfully submitted.
Here is a plunker:
function FormController($scope) {
$scope.formData = {
firstname: 'Eugene',
lastname: 'Crabs',
username: 'MrCrabs'
};
$scope.submit = submit;
function submit() {
if ($scope.someForm.$invalid) {
return;
}
$scope.formData = {};
$scope.someForm.$setUntouched();
return;
}
}
http://plnkr.co/edit/cJYStvlveHvAxhlza0Q0?p=preview
It's a simple task, it can't be that hard. What am I missing?

Answer 1

in your case change ng-show to
(someForm.username.$dirty || submitted)
in code
<div class="error-message" ng-show="(someForm.username.$dirty || submitted)">
note: it must be submitted, NOT form.$submitted
update your function in controller
$scope.submit = function() {
// set form is submitted
$scope.submitted = true;
if ($scope.someForm.$invalid) {
return;
}
$scope.formData = {};
// set form default state
$scope.someForm.$setPristine();
// set form is no submitted
$scope.submitted = false;
return;
}
and it works
more info about solution
plukr demo

Answer 2

This is a very interesting topic; I believe this forked plunker does what you want: http://plnkr.co/edit/RSSFFBmJ6MZtX3aaoNLb?p=preview
The key implementation points are:
Put an enableMessages flag in the scope
When the submit button is pressed, make the flag true before validation
Change the error message display conditions as:
<span ng-show="someForm.firstname.$error.required && (someForm.firstname.$dirty || enableMessages)">Please enter your firstname</span>
It reads "display this message if the field has an error and it has been touched by the user OR messages are enabled for the entire form".
Putting such a long condition in the HTML is a bad practice, so I would consider writing a helper function, e.g. (UNTESTED CODE):
$scope.showCondition = function(fieldName, validatorName) {
return $scope.someForm[fieldName].$error[validatorName] &&
($scope.someForm[fieldName].$dirty || enableMessages);
};
The ng-show becomes much more concise:
<span ng-show="showCondition('firstname', 'required')">Please enter your firstname</span>
In this case the enableMessages is no longer a scope variable, but a private var of the controller.