Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(@angular/forms): add ng-submitted class #31070

Open
wants to merge 2 commits into
base: master
from

Conversation

@edwandr
Copy link

commented Jun 15, 2019

Add ng-submitted class to form controls when parent form has been submitted

Fixes #30486

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

No class is added to form controls and container when parent form is submitted

Issue Number: 30486

What is the new behavior?

When parent form is submitted (if there is a parent form), form controls get ng-submitted class

Does this PR introduce a breaking change?

  • Yes
  • No

Constructor arguments of NgControlStatus have changed : we added one optional injected argument controlContainer

Other information

Would it be better to add submitted property to Form interface (which NgForm and FormGroupDirective implement) ?

This would avoid the imports of these to directives in ng_control_status.ts. I'm afraid that importing them could increase bundle size.

@edwandr edwandr requested review from angular/fw-forms as code owners Jun 15, 2019

@googlebot

This comment has been minimized.

Copy link

commented Jun 15, 2019

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.


What to do if you already signed the CLA

Individual signers
Corporate signers

ℹ️ Googlers: Go here for more info.

@googlebot googlebot added the cla: no label Jun 15, 2019

@edwandr

This comment has been minimized.

Copy link
Author

commented Jun 15, 2019

I signed it!

@googlebot

This comment has been minimized.

Copy link

commented Jun 15, 2019

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

@googlebot googlebot added cla: yes and removed cla: no labels Jun 15, 2019

@cexbrayat

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2019

Note to the team: this is a first time contributor, contributing to Angular during the HackCommitPush conference, which aims to help developers to contribute to open source projects :)

CI failure looks like an unrelated flake

@cexbrayat cexbrayat changed the title Feat/add ng submitted feat(@angular/forms): add ng-submitted class Jun 15, 2019

@kara kara added the comp: forms label Jun 19, 2019

@ngbot ngbot bot added this to the needsTriage milestone Jun 19, 2019

@jasonaden

This comment has been minimized.

Copy link
Contributor

commented Jun 20, 2019

@jasonaden
Copy link
Contributor

left a comment

Overall this looks good. Just a couple notes. Thanks for the submission!

@@ -24,6 +30,11 @@ export class AbstractControlStatus {
get ngClassValid(): boolean { return this._cd.control ? this._cd.control.valid : false; }
get ngClassInvalid(): boolean { return this._cd.control ? this._cd.control.invalid : false; }
get ngClassPending(): boolean { return this._cd.control ? this._cd.control.pending : false; }
get ngClassSubmitted(): boolean {
return this._controlContainer && this._controlContainer.formDirective ?

This comment has been minimized.

Copy link
@jasonaden

jasonaden Jun 27, 2019

Contributor

Initially looking at this I was confused because you're checking for this._controlContainer to exist when the constructor here say's required. But in NgControlStatus below you've marked it as @Optional. However, as far as TypeScript goes it's still required.

I would like to make the types align correctly. You will need to use @Inject along with making the ControlContainer optional in order for the JIT compiler to behave. Something like this:

export class AbstractControlStatus {
  ...
  constructor(cd: AbstractControlDirective, controlContainer?: ControlContainer) { ... }
}

and

export class NgControlStatus extends AbstractControlStatus {
  constructor(@Self() cd: NgControl, @Inject(ControlContainer) @Optional() controlContainer?: ControlContainer) { ... }
}
@@ -360,7 +360,7 @@ export declare abstract class NgControl extends AbstractControlDirective {
}

export declare class NgControlStatus extends AbstractControlStatus {
constructor(cd: NgControl);
constructor(cd: NgControl, controlContainer: ControlContainer);

This comment has been minimized.

Copy link
@jasonaden

jasonaden Jun 27, 2019

Contributor

Make sure to update the public API docs as well to mark this optional.

@mhevery

This comment has been minimized.

Copy link
Member

commented Jul 22, 2019

@edwandr can you clean up.

@edwandr
Copy link
Author

left a comment

@jasonaden Thanks for the feedbacks !
@mhevery I'll clean up in the week

feat(forms): add ng-submitted class
Add ng-submitted class to form controls when parent form has been submitted

Fixes #30486

@edwandr edwandr force-pushed the edwandr:feat/add-ng-submitted branch from 08fe213 to 67728a7 Aug 9, 2019

@edwandr
Copy link
Author

left a comment

@jasonaden i added the optional type for controlContainer argument

@edwandr edwandr force-pushed the edwandr:feat/add-ng-submitted branch from 67728a7 to 0200127 Aug 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.