angular - Actualizar valor en formArray

Entonces tengo esta configuración:

Modelo :

export class MapDetailModel{
    id: number;
    lat: number;
    lon: number;
    alt: number;
    long: number;
    angle: number;
    distance?: number;
    pendenza?: number;
}

Html :

<div class="element-list">
        <form [formGroup]="survey" novalidate (ngSubmit)="onSubmit(survey)" *ngIf="items">
            <div formArrayName="sections">
                <div class="single-item" *ngFor="let section of getSections(survey); let i = index">
                    <div  [formGroupName]="i">
                        Lat: <input type="text" formControlName="lat" class="frm-txt">
                        Lon: <input type="text" formControlName="lon" class="frm-txt">
                        Long: <input type="text" formControlName="long" class="frm-txt">
                        Angle: <input type="text" formControlName="angle" class="frm-txt">
                        a: {{i.angle}}
                        <a (click)="updateData(i)">Update data</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

ts :

@Component({
    //moduleId: module.id,
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'my-info-bar',
    templateUrl: 'map-info-bar.component.html',
    styleUrls: ['map-info-bar.component.css'],
    providers: [],
})
export class MapInfoBarComponent implements OnInit, OnDestroy
{
  zoomLevels: any[];
  points: MapDetailModel[] = [];
  isAlive = true;
  survey: FormGroup;
  items = false;

  constructor(
    private mapService: MapService,
    private fb: FormBuilder,
    private  changeDetectorRef: ChangeDetectorRef
    ){}

  ngOnInit() {

    this.mapService.singlePointChanged
    .takeWhile(() => this.isAlive)
    .subscribe( evt => {
      if(!!evt && !!this.survey.value.sections[0]){
        let elem;
        this.points.forEach(el => {
          if(el.id == evt.id){
            el = evt;
            elem = el;
          }
        });
        (<FormArray>this.survey.get('sections')).at(elem.id).patchValue(elem);
         this.changeDetectorRef.detectChanges();
      }
    })

    this.mapService.pointsChanged
    .takeWhile(() => this.isAlive)
    .subscribe( evt => {
      if(!!evt){
        this.points = evt;

        if(!this.items){
          this.survey = this.fb.group({
            sections: this.fb.array([
              this.initSection(0),
            ]),
          });
          this.items = true;
        } else {
          this.addSection(this.points.length - 1);
        }
      }
    });
  }

  initSection(idx: number) {
    return this.fb.group({
      lat: [this.points[idx].lat],
      lon: [this.points[idx].lon],
      long: [this.points[idx].long],
      angle: [this.points[idx].angle]
    });
  }

  addSection(idx: number) {
    const control = <FormArray>this.survey.get('sections');
    control.push(this.initSection(idx));
  }

  getSections(form) {
    return form.controls.sections.controls;
  }

  updateData(index: number){
    const values = this.survey.value.sections[index] as MapDetailModel;
    this.mapService.setChangePoint(values);
  }

  ngOnDestroy(): void {
    this.isAlive = false;
  }
}

Para ahora todo está funcionando bien. Estoy mostrando los datos correctamente y estoy feliz. El problema es cada vez que se ejecuta esta línea:

(<FormArray>this.survey.get('sections')).at(elem.id).patchValue(elem);

Me da este error:

ERROR TypeError: Cannot read property 'patchValue' of undefined

pero su estructura es así:

Entonces, ¿cómo puedo actualizar el valor de formArray en la posición elem.id? Lo que no entiendo es, ¿cómo puede ser undefined si el .get debería encontrar los datos de 'section'?

Gracias.

Respuesta #1

TL;DR - Eso es porque llamas a esta acción antes de inicializar tu formulario.

Lo que estás haciendo actualmente: inicializas tu formulario solo cuando pointsChanged se ha activado. Hasta entonces, el formulario permanecerá indefinido.

Lo que deberías considerar hacer: Inicializa tu formulario en ngOnInit o inmediatamente cuando declares tu formulario de la siguiente manera:

survey: FormGroup = this.fb.group({
  sections: this.fb.array([]),
});

Cuando se active pointsChanged, considera usar patchValue con los datos que recibiste.