Angular 6 FormArray и циклы в HTML

Question

Все,

Мне очень трудно заставить FormArray работать с моим текущим приложением.Я пытаюсь получить имена из службы и добавить их в форму бронирования (и дать пользователю возможность добавлять / удалять / изменять имена)

Вот соответствующий код:

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);
  });
}

Когда я смотрю на консоль, она показывает, что она добавляется.Является ли приведенный выше код правильным?

И если он верен, как я могу просмотреть его в HTML и отобразить?

Я перепробовал несколько вещей, но не повезло: - (

<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

Answer 1

У вас есть массив FormControl (не массив FormGroup).так что

<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}}

Answer 2

Примерно так должно работать:

<div formArrayName="credentials" *ngFor="let creds of form.controls.attendeeName?.value; let i = index">
    <ng-container [formGroupName]="i">
      <input formControlName="name">
    </ng-container>
</div>

Из этого примера

Answer 3

Пожалуйста, примите во внимание следующее

    <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>