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

[edwandr]

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:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

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.

[googlebot]

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

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[edwandr]

I signed it!

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[cexbrayat]

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

[jasonaden]

Presubmit

[jasonaden]

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

[jasonaden]

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) { ... }
}

[jasonaden]

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

[mhevery]

@edwandr can you clean up.

[edwandr]

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

[edwandr]

@jasonaden i added the optional type for controlContainer argument

[edwandr]

@mhevery @jasonaden Hi, happy new year ! Are the modifications i pushed ok for you ?

[AndrewKushnir]

(just for additional context: related issue #30486)

[AndrewKushnir]

Hi @edwandr, thanks for submitting this PR and sorry that we didn't have a chance to get back to it sooner.

I've reviewed the changes and I think that we should simplify the changes and support the ng-submitted class only for the classes that actually have this status, i.e. NgForm and FormGroupDirective (the directives that can represent the top-level form). Other form elements (like <input>s) would be able to use the top-level form's status to set specific styling if needed (for ex.: .ng-submitted input { font-size: 10px; }).

Please let us know if you might be interested in making additional changes in this PR.

Thank you.

[AndrewKushnir]

Closing this PR, new PR - #42132.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}