Skip to content

feat(forms): Add FormArrayDirective#55880

Closed
JeanMeche wants to merge 2 commits intoangular:mainfrom
JeanMeche:feat/formArrayDirective
Closed

feat(forms): Add FormArrayDirective#55880
JeanMeche wants to merge 2 commits intoangular:mainfrom
JeanMeche:feat/formArrayDirective

Conversation

@JeanMeche
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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.

@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch 3 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
Copy Markdown
Member Author

JeanMeche commented May 3, 2025

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 alxhub and dylhunn May 3, 2025 00:36
@JeanMeche JeanMeche mentioned this pull request May 15, 2025
Closed
@JeanMeche JeanMeche marked this pull request as draft June 4, 2025 14:51
@JeanMeche
Copy link
Copy Markdown
Member Author

JeanMeche commented Jun 4, 2025

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

@thePunderWoman thePunderWoman removed their request for review June 4, 2025 14:52
@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
@JeanMeche
refactor(forms): extract shared logic from FormGroupDirective
755da6b 
Ahead of the implementation of `FormArrayDirective`, extract the shared logic into an abstract class.
@JeanMeche JeanMeche force-pushed the feat/formArrayDirective branch from bcb0bfc to 35d29fe Compare August 11, 2025 22:18
@JeanMeche
feat(forms): Add FormArrayDirective
6414614 
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
Copy link
Copy Markdown
Member Author

JeanMeche commented Aug 12, 2025

Passing TGP

thePunderWoman
thePunderWoman approved these changes Aug 20, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@thePunderWoman thePunderWoman left a comment

Choose a reason for hiding this comment

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

LGTM!

reviewed-for: fw-general, public-api

mmalerba
mmalerba approved these changes Aug 20, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

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

reviewed-for: public-api

@AndrewKushnir
Copy link
Copy Markdown
Contributor

AndrewKushnir commented Aug 21, 2025

This PR was merged into the repository. The changes were merged into the following branches:

@viniciusscience

This comment was marked as off-topic.

Sign in to view
@angular-automatic-lock-bot
Copy link
Copy Markdown

angular-automatic-lock-bot bot commented Oct 14, 2025

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@AndrewKushnir AndrewKushnir AndrewKushnir left review comments

@thePunderWoman thePunderWoman thePunderWoman approved these changes

+2 more reviewers

@dylhunn dylhunn dylhunn approved these changes

@mmalerba mmalerba mmalerba approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

action: merge The PR is ready for merge by the caretaker 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

7 participants

@JeanMeche @AndrewKushnir @viniciusscience @thePunderWoman @dylhunn @mmalerba @alxhub