feat(form): $submitted state #8056
Conversation
Added new state to form: - it sets to true when form is submitted - it sets back to false when $setPristine is called on the form
|
Thanks for the PR! Please check the items below to help us merge this faster. See the contributing docs for more information.
If you need to make changes to your pull request, you can update the commit with Thanks again for your help! |
|
Please make those two fixes and fix the |
|
@nicoabie any updates? |
|
@matsko will push it tonight, sorry for the delay. |
|
No rush. Thank you for the quick reply. :) |
| expect(scope.form.$submitted).toBe(true); | ||
| }); | ||
|
|
||
| it('should revert submitted back to false when $setPristine is called on the form', function() { |
There was a problem hiding this comment.
what about $animate.removeClass(element, SUBMITTED_CLASS)? we should also have a test for this case
There was a problem hiding this comment.
@lucassus care to explain a little bit what you meant? Sorry I didn't get it.
use $animate.setClass in form.$setPristine to just use one animation use $animate.addClass in form.$setSubmitted Closes angular#8056
|
Updates? jshint is failing, though not the same error |
|
@rodyhaddad I pushed what @matsko suggested and fixed the jshint error. Locally it is all green. Don't get it why it fails in here. I followed this guideline. https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md |
|
+1 |
The $submitted state changes - to true when the form is submitted - to false when $setPristine is called on the form A .ng-submitted class is added to the form when $submitted=true Closes angular#8056
| form.$setSubmitted = function () { | ||
| $animate.addClass(element, SUBMITTED_CLASS); | ||
| form.$submitted = true; | ||
| parentForm.$setSubmitted(); |
There was a problem hiding this comment.
RFI: What's the rationale behind it? Why submitting a nested form needs marking all its parent as submitted?
There was a problem hiding this comment.
Good question, I kept the logic of how the other states propagates upwards.
Do you have an use case that goes against this?
There was a problem hiding this comment.
Yep, I have a multi-step form (aka wizard). I use .ng-submitted to style invalid inputs and have a plugin that detects if forms is dirty.
On pre-exit a state:
nestedForm.$setSubmitted();
if (!nestedForm.$valid) return;On entering a sub-state / nested form:
this.target.mainForm.$setPristine();Style:
.ng-submitted [ng-model].ng-invalid {
border: 1px solid red;
}The border keeps being draw because there's a form styled with .ng-submitted further up. And I actually use $setPristine() because it clears $submitted, but then it breaks form dirty-checking plugin.
Some strategies that could it (if they existed):
- form.$setSubmitted(state: boolean);
- form.$setSubmitted(updateParents: boolean);
I'm not sure yet about the invariants that could break with that. WDYT?
There was a problem hiding this comment.
A workaround while form.$setSubmitted(state: boolean) doesn't exist:
const wasDirty = mainForm.$dirty;
mainForm.$setPristine();
if (wasDirty) {
mainForm.$setDirty();
}
Added new state to form: