How to create nested Form Array in Angular 11

Question

i'm trying to do nesting of form array in angular 11. As of now I have try like this and it working fine.


spinner: boolean = false;
  new_created: boolean = true;
  create_question_form: FormGroup;
  group: any = new FormGroup({
    name: new FormControl(''),
  });

  constructor(private route: ActivatedRoute, private fb: FormBuilder) {}

  validation() {
    this.create_question_form = this.fb.group({
      question: new FormArray([this.group]),
    });
  }

  get question() {
    return this.create_question_form.get('question') as FormArray;
  }

  add_question() {
    this.question.push(this.group);
  }

  create_question() {
    const data = this.create_question_form.getRawValue();
    console.log(data);
  }

  ngOnInit(): void {
    this.validation();
    this.add_question();
  }

 <form
            [formGroup]="create_question_form"
            (ngSubmit)="create_question()"
          >
            <ng-container formArrayName="question">
              <div *ngFor="let _ of question.controls; index as i">
                <ng-container [formGroupName]="i">
                  <div class="col-12 col-md-4 mt-5">
                    <span class="p-float-label w-100">
                      <input
                        type="text"
                        id="inputtext"
                        class="form-control"
                        formControlName="name"
                        pInputText
                      />
                      <label for="inputtext">Name</label>
                    </span>
                  </div>
                </ng-container>
              </div>
            </ng-container>

            <button type="submit" class="btn btn-success">Create</button>
          </form>

But what I want is to create a new FormArray (Address) inside my Formgroup something like this.

 group: any = new FormGroup({
    name: new FormControl(''),
    address:new FormArray([]),
  });

I don't have any idea how can I access this address form array in my HTML or how can I push new FormControls in this array.

Does this answer your question: stackoverflow.com/questions/68433975/… — Devang Patel
– Devang Patel, Commented Jul 24, 2021 at 13:05
it does not work for me. My form is different formgroup>formarray>formgroup>formarray — Mohd Sabban
– Mohd Sabban, Commented Jul 24, 2021 at 13:16

Hemant Vetal · Accepted Answer · 2021-07-24 12:18:38Z

0

for adding a new group: this.group.controls.address.push(new FormGroup({street: new FormControl('')}));

for accessing that added group: this.group.controls.address['controls'][0]['controls']['street'].value

for removing that group: let group_arr = (this.group.controls.address as FormArray); group_arr.removeAt(index)

answered Jul 24, 2021 at 12:18

Hemant Vetal

194 bronze badges

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

2 Comments

Mohd Sabban Over a year ago

but how to create template for address.

Hemant Vetal Over a year ago

This is correct syntaxgroup: any = new FormGroup({ name: new FormControl(''), address:new FormArray([]), });

jagjeet · Accepted Answer · 2021-07-24 18:07:40Z

0

to add the form group :

this.group.controls.address.push(new FormGroup({street: new FormControl('')}));

to use in template :

in ts:

get addresses(): FormArray {
    return this.group.controls.address as FormArray;
}

in html :

<ng-container *ngFor="let address of addresses.controls">
  <form [formGroup]="address">
    <input type="text" formControlName="street">
  </form>
</ng-container>

answered Jul 24, 2021 at 18:07

jagjeet

5953 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to create nested Form Array in Angular 11

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related