Angular 6 FormArray and looping in HTML

Question

All,

I am having a really hard time getting FormArray working with my current application. I am trying to get names from a service and add them to a reservation form (and give the ability to the user to add/delete/modify names)

Here is relevant code:

reservationForm: FormGroup;
attendeeArray: FormArray;

constructor(
  private groupMeetingService: GroupMeetingsService,
  private formBuilder: FormBuilder
) {}

ngOnInit() {
  this.initialize();
}

private createAttendeeName(name: string): FormControl {
  return this.formBuilder.control({
    name: name
  });
}

private initialize(): void {
  this.attendeeArray = this.formBuilder.array([]);
  this.reservationForm = this.formBuilder.group({
    attendeeRadio: ['inPerson'],
    attendeeName: this.attendeeArray,
  });

  this.groupMeetingService.getMeeting(this.meeting.id).subscribe(meeting => 
  {
    this.meetingLocation = meeting.location;
  });
  this.groupMeetingService
    .getReservations(this.meeting.id)
    .subscribe(data => {
      this.reservations = data;
      this.attendeeArray = this.getAttendeeNames();
      data.attendees.forEach(attendee => {
        this.attendeeArray.push(this.createAttendeeName(attendee.name));
      });
      console.log('array', this.reservationForm);
  });
}

When I look at my console, it does show that it is being added. Is the above code correct?

And if it is correct, how do I loop through it in HTML and get it to display?

I have tried a bunch of things but no luck :-(

<div class="reservation-container" [formGroup]="reservationForm">
  <div formArraryName="attendeeArray" *ngFor="let attendee of reservationForm.controls['attendeeName'].controls; let i = index">
    <input [formControlName]="i" value="{{ attendee.name }}">
  </div>
</div>

Thx jonpfl

This arcticle helped me: alligator.io/angular/reactive-forms-formarray-dynamic-fields — Gregor Albert
– Gregor Albert, Commented Feb 20, 2019 at 14:20

Josejacob99 · Accepted Answer · 2021-06-09 15:29:40Z

5

Consider the following

<div class="reservation-container" [formGroup]="reservationForm">
  <div formArraryName="attendeeArray" *ngFor="let attendee of reservationForm.get('attendeeName')['controls']; let i = index">
    <input [formControlName]="i" value="{{ attendee.name }}">
  </div>
</div>

edited Jun 9, 2021 at 15:29

answered Feb 20, 2019 at 14:09

Josejacob99

5251 gold badge4 silver badges9 bronze badges

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

2 Comments

Eliseo Over a year ago

each time someone write [formControlName] and value in the same tag, a little cat died

HDJEMAI Over a year ago

Why 2 attributes in the same element here ?

Eliseo · Accepted Answer · 2019-02-20 14:35:18Z

1

You has an array of FormControl (not an array of FormGroup). so

<div class="reservation-container" *ngIf="reservationForm" [formGroup]="reservationForm">
  <!--is attendeeName-->
  <div formArraryName="attendeeName">
    <!--the "formArrayName out of the *ngFor-->
    <div *ngFor="let attendee of reservationForm.controls['attendeeName'].controls; let i = index">
    <!--is formControl-->
    <input [formControl]="attendee" >
    </div>
  </div>
</div>
<!--only for check use-->
{{reservationForm?.value|json}}

answered Feb 20, 2019 at 14:35

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

Angular 6 FormArray and looping in HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related