Skip to content

feat(forms): Add FormArrayDirective #55880

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.

Sign up for GitHub

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

Jump to bottom
Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat(forms): Add FormArrayDirective #55880

wants to merge 2 commits into from

Conversation

JeanMeche
Copy link
Member

@JeanMeche JeanMeche commented May 20, 2024 •
edited
Loading

The FormArrayDirective will allow to have a FormArray as a top-level form object.

  • NgControlStatusGroup directive will be applied to the FormArrayDirective
  • NgForm will still create a FormGroup

Usage :

@Component({
  selector: 'form-array-comp',
  template: `
    <form [formArray]="form">
      @for(_ of controls; track $index) {
        <input [formControlName]="$index">
      }
    </form>`,
})
class FormArrayComp {
  controls = [new FormControl('fish'), new FormControl('cat'), new FormControl('dog')];
  form = new FormArray(this.controls);
}

Fixes #30264

BREAKING CHANGE: The formDirective getter on FormGroupName and FormArrayName now return a AbstractFormDirective

@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label May 20, 2024
@ngbot ngbot bot added this to the Backlog milestone May 20, 2024
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch 10 times, most recently from 35741f0 to 2d950c1 Compare May 20, 2024 20:30
@JeanMeche JeanMeche marked this pull request as ready for review May 20, 2024 21:40
@pullapprove pullapprove bot requested review from atscott and dylhunn May 20, 2024 21:40
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch from 2d950c1 to f29120d Compare May 20, 2024 23:33
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch from f29120d to 25997b4 Compare May 30, 2024 21:47
@JeanMeche JeanMeche added the action: review The PR is still awaiting reviews from at least one requested reviewer label Jun 9, 2024
@dylhunn dylhunn requested review from AndrewKushnir and removed request for atscott June 17, 2024 15:52
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch from 25997b4 to d6271bb Compare June 17, 2024 15:55
AndrewKushnir
AndrewKushnir reviewed Jun 17, 2024
View reviewed changes
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JeanMeche I had a quick look and the changes look good. I want to ask if you could split the commit into 2:

  • first refactor commit performs a refactoring and extracts out the common logic into the abstract form directive class
  • the second feat commit that adds a new directive

That should help to make the change more incremental and help with more detailed code review.

@AndrewKushnir AndrewKushnir added the target: minor This PR is targeted for the next minor release label Jun 17, 2024
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch 2 times, most recently from 7a959ab to e7d47d9 Compare June 18, 2024 10:26
dylhunn
dylhunn approved these changes Jul 1, 2024
View reviewed changes
Copy link
Contributor

@dylhunn dylhunn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for splitting up the change in this way! Let's merge this after the RC, so we can get it on the 18.2 track, and we'll have plenty of time to receive feedback from GDEs and other early users.

@alxhub alxhub modified the milestones: Backlog, v19.1 candidates Oct 21, 2024
@ngbot ngbot bot added this to the Backlog milestone Oct 21, 2024
@alxhub alxhub modified the milestones: Backlog, v20 candidates Oct 21, 2024
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch 4 times, most recently from 151fb16 to db3aebe Compare April 3, 2025 11:29
@JeanMeche JeanMeche removed this from the v20 candidates milestone Apr 24, 2025
@ngbot ngbot bot added this to the Backlog milestone Apr 24, 2025
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch 2 times, most recently from 157202d to 74d6af2 Compare May 1, 2025 13:15
@JeanMeche JeanMeche added breaking changes and removed breaking changes detected: breaking change PR contains a commit with a breaking change labels May 3, 2025
@JeanMeche
Copy link
Member Author

G3 has been cleaned-up but bummer we missed the v20 breaking change window.

This is a breaking change due to the typing change for the formDirective getter.

@JeanMeche JeanMeche modified the milestones: Backlog, v21 Candidate May 3, 2025
@JeanMeche JeanMeche removed request for dylhunn and alxhub May 3, 2025 00:36
@JeanMeche JeanMeche mentioned this pull request May 15, 2025
Open
@JeanMeche JeanMeche marked this pull request as draft June 4, 2025 14:51
@JeanMeche
Copy link
Member Author

Converting back to draft until we enter the breaking change window.

@thePunderWoman thePunderWoman removed their request for review June 4, 2025 14:52
JeanMeche added 2 commits June 4, 2025 17:27
@JeanMeche
refactor(forms): extract shared logic from FormGroupDirective
3658095 
Ahead of the implementation of `FormArrayDirective`, extract the shared logic into an abstract class.
@JeanMeche
feat(forms): Add FormArrayDirective
bcb0bfc 
The `FormArrayDirective` will allow to have a `FormArray` as a top-level form object.

* `NgControlStatusGroup` directive will be applied to the `FormArrayDirective`
* `NgForm` will still create a `FormGroup`

Fixes angular#30264

BREAKING CHANGE: This new directive will conflict with existing FormArray directives or formArray inputs on the same element.
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch from 74d6af2 to bcb0bfc Compare June 4, 2025 15:27
@angular-robot angular-robot bot added the detected: breaking change PR contains a commit with a breaking change label Jun 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AndrewKushnir AndrewKushnir AndrewKushnir left review comments

@dylhunn dylhunn dylhunn approved these changes

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
action: review The PR is still awaiting reviews from at least one requested reviewer area: forms breaking changes detected: breaking change PR contains a commit with a breaking change detected: feature PR contains a feature commit target: major This PR is targeted for the next major release
Projects
None yet
Milestone
v21 Candidate
Development

Successfully merging this pull request may close these issues.

Supporting [formArray] without a [formGroup] parent
4 participants
@JeanMeche @dylhunn @AndrewKushnir @alxhub