0

I have problem with cdkVirtualFor with FormArray. It doesn't generate any items.

My html:

<cdk-virtual-scroll-viewport
  [itemSize]="100"
  class="viewport-container"
  [formArrayName]="'items'"
>
  <div
    *cdkVirtualFor="
    let item of myFormArray.controls;
    let i = index;
    "
    [formGroupName]="i"
  >
    <div
    fxFlex
    fxLayout="row"
    fxLayoutAlign="start center"
    fxLayoutGap="17px"
    >
      <label>
        {{ i + 1 }}
      </label>
      <our-custom-form-field
        fxFlex
        [errorMessages]="validationErrors"
        [formControlName]="'option1'"
      >
        <input
         type="float"
        />
      </our-custom-form-field>
      <our-custom-form-field
        fxFlex
        [errorMessages]="validationErrors"
        [formControlName]="'option2'"
      >
        <input
          type="float"
         />
         </our-custom-form-field>
     </div>
  </div>
</cdk-virtual-scroll-viewport>

The myFormArray is getter

get myFormArray(): FormArray {
    return this.myFormBase?.get('items') as FormArray;
  }

And in this.myFormBase items are simply items: new FormArray([]) Before using cdk-virtual-scroll-viewport it was generated by ngFor, but due to occurrences of really large arrays I need to render some elements onScroll. But I don't know why this doesn't work. Controls exists, they are not nullish and all I see is blank space with size of .viewport-container class.

I tried generate those fields by using simple array with mock values like [1, 2, 3...] and it worked. Just don't know why it doesn't work with FormArray

EDIT: Problem was with myFormArray, when *cdkVirtualFor got it it was null, shortly after it was assigned with value, but cdk already rendered it with null. It worked properly when I passed the FormArray controls asynchronously.

Improve this question
5
  • I beg your pardon, but why do you need to inform the formArrayName? Just use this itemSize="100" minBufferPx="900" maxBufferPx="1350" is enought Commented Aug 1, 2023 at 18:42
  • To ask for values and to set values. Without that I receives browser error - not found form control. That was the solution that I found to iterate thorugh FormArray in HTML and as I said with *ngFor it worked perfectly Commented Aug 2, 2023 at 6:03
  • instead of FormArray you can use any[] Commented Aug 2, 2023 at 10:42
  • Solved problem, myFormArray was null when *cdkVirtualFor gets it, when I changed it to async it worked fine. But sadly more problems occured and due to lack of time we had to use *ngFor with limit to not generate enormous HTML on init. But appreciate your help Commented Aug 3, 2023 at 14:47
  • another thing, it is not recommended to use Getter for this kind of application. Use a property instead. Getter is slower than property. That's the reason it is null when reading by CdkvirtualFor Commented Aug 4, 2023 at 10:50
Related questions
1247
Angular: conditional class with *ngClass
947
ngFor with index as value in attribute
3
mat-select-trigger doesn't work with cdk-virtual-scroll-viewport
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.