Angular 8 Form Array

Question

I got error ERROR TypeError: "this.eventData.map is not a function" when using form array. I don't have any idea how to fix it this error. This my code as you reference. I don't have any idea how to fix it this error. This my code as you reference. I don't have any idea how to fix it this error. This my code as you reference

html

<div class="card col-8 shadow-sm">
    <div class="list-group">
        <form name="form" [formGroup]="form" (ngSubmit)="form.valid && onSubmit()">
        <div class="list-group-item flex-column align-items-start" *ngFor="let list of eventData?.events; list as index; let i of index">
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                <span class="d-flex align-items-center">
                <h5 class="card-title pr-3 d-inline-block font-weight-bold">{{list.eventName}}</h5>
                <span class="border border-danger d-flex align-self-center pl-2 pr-2 text-danger">{{list.seats}} space left</span>
            </span>
                <span class="btn btn-primary btg" (click)="lightbox.open(0, 'lightbox',test)"><i class="fa fa-image pr-2"></i>Gallery</span>
            </div>
                <p class="card-text">
                    {{list.eventNote}}
                </p>
                <div>
                    <span class="font-weight-bold pr-2">Attendings :</span>
                    <span  class="ml-5">
                    <mat-radio-group [formControl]="myFormArray.at(i).get('attendings')"  aria-label="Select an option">
                        <mat-radio-button value="y">Yes</mat-radio-button>
                        <mat-radio-button value="n">No</mat-radio-button>
                      </mat-radio-group>
                    </span>
                </div>
                <div class="w-60 mt-4">
                    <div class="card  card-line col-md-12 mb-3" *ngFor="let fee of list.feeList; let i = index">
                         <div  class="card-body ctrl-height">
                         <input type="radio" [formControl]="myFormArray.at(i).get('confee')" id="{{fee.feeId}}" [value]="fee">
                         <label for="{{fee.feeId}}">
                          <span class="id-conf">{{fee.category}} {{i}}</span>
                          <span class="price">{{fee.price}}</span>
                        </label>
                        </div> 
                     </div>
                 </div>
            </div>
        </div>
    </form>
     </div>
     <div class="card-footer no-gutters ctrl-lr">
        <div class="card-body float-right"> 
            {{form.value | json}}
            <a (click)="" class="btn btn-primary  card-link d-inline pl-4 pr-4">Submit </a>

        </div>
      </div>
  </div>

And this is Component Part

Component

    form = this.fb.group({
    attendings: new FormControl,
    confee: new FormControl

   });     

        ngOnInit() {
              this.getPackage(id);
            }

              getEvent(id){
        let t = 1;
        this.httpService.getConferenceEvent(t).subscribe(res =>{
            this.eventData = res;
            this.feeListData = res['feeList'];
            console.log(this.eventData);
            this.assignControls()
        })
      }


      assignControls(): void {
        this.controls = this.eventData.map(pack => {
            return new FormGroup({
                attendings: new FormControl(),
                fee: new FormControl()
            });
       })

       this.form = new FormGroup({
           formArray: new FormArray(this.eventData)
       });
    }

Hope you all can help Thanks in advance

Answer 1

TypeError: Cannot read property 'map' of undefined means this.eventData is undefined when the map is made. First you are calling your service but you are assigning your control to something that hasnt been initialized yet which is why its not working.

    ngOnInit() {
      this.getPackage(id);
    }

    getPackage(id){
        this.httpService.getPackageEvent(id).subscribe(res =>{
            this.eventData = res;
            this.assignControls()
        })
    }

    assignControls(): void {
        this.controls = this.eventData.map(pack => {
            return new FormGroup({
                attendings: new FormControl(),
                fee: new FormControl()
            });
       }
       this.form = new FormGroup({
           formArray: new FormArray(this.eventData)
       });
  });

Using that code, atleast the controls will be assigned when eventData exist. The error should disappear unless your service returns undefined or something that isnt an array.

To make it clear, when you subscribe to something, you are doing something asynchronous which means the code order doesnt mean anything. You either have to call functions from inside the subscribe or make the call synchronous by using await(don't do that, its bad since its going to freeze the app)