Angular reactive forms form array on its own

Question

I am a bit confused with angular's form group and form array. I know you can nest form arrays in form groups but can a form array exists on its own? Basically I need the entire form to be an array that I can push "base" controls to, OR, insert controls at certain positions depending on selections from a dropdown. for example

Name (text field)
Phone (text field)
Payment schedule (dropdown w/ values of weekly, monthly, yearly)
Address (text field)

If weekly is selected from the payment schedule dropdown I need to show a new input, lets say its called "day of week", in between payment and address fields.

This is the part that im struggling with. I've basically built out this (https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2)tutorial but can't wrap my head around how to add field in between each other if the whole form is not a form array, which I can't seem to do.

question-control.service.ts (from angular docs. see: https://angular.io/guide/dynamic-form)

questions.forEach(question => {

  group[question.key] = question.required ?
    new FormControl(question.value || '', [Validators.required, Validators.minLength(question.minLength)]) :
    new FormControl(question.value || '');
});

return new FormGroup(group);

So what have you tried and what piece of code are you struggling with? :) — AVJT82
– AVJT82, Commented Feb 20, 2018 at 17:43
just make the entire form an form group.But what you are describing, you could section pieces of the form using form groups and showing or hiding based on other form inputs. — floor
– floor, Commented Feb 20, 2018 at 17:53
@Anthony, you needn't use a formArray. You create a formGroup with all the necessary fields. then you hide a field or not (e.g. using *ngIf) according the values of another fields. but you don't need a formArray — Eliseo
– Eliseo, Commented Feb 20, 2018 at 18:08
I anticipate there being validation issues if a field that is set as required is hidden. See the code I added to my question. Would the solution be to have them not required and only set as required if that section is currently being shown? @Eliseo — Anthony
– Anthony, Commented Feb 20, 2018 at 18:17

Andrew Howard · Accepted Answer · 2018-02-20 18:39:34Z

1

I think you've approached this in an incorrect way. You don't need to use a form array whatsoever, it's making life a lot more complicated than it needs to be. Just make a form with ALL the fields that the form will use. Then put onchange methods on controls which need to amend the validity of other controls.

answered Feb 20, 2018 at 18:39

Andrew Howard

3,0937 gold badges41 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular reactive forms form array on its own

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related