RegisterOnChange is not a function

I designed this form using FormBuilder(fb)

this.serviceRecordForm = this.fb.group({
        client: [],
        serviceRecordItem: this.fb.group({
            productStatus: [''],
            password: [''],
            hasBackup: [''],
            deliveryType: [''],
            product: [''],
            brand: [''],
            serialNumber: [''],
            defect: [''],
        }),
        accesoryList: this.fb.array([''])
    });

accesoryList is an array coming from backend. And my HTML form is :

            <form [formGroup]="serviceRecordForm" (ngSubmit)="save()">

            <div class="mb-3" *ngFor="let accesory of accesoryList">
                <label for="{{accesory.id}}" class="form-label">{{accesory.name}}
                    <input type="checkbox" id="{{accesory.id}}" formControlName="accesoryList"
                           [ngModel]="accesory"></label>
            </div>

        </form>

I am populating this accesoryList inside ngOnInit() method from Restful API.

this.accesoryService.getAccesories().subscribe(accesories => {
        this.accesoryList = accesories;
    })

Whenever i open my form i can see it properly designed and populated accesoryList from backend but i got this error as much as number of accesoryList.length inside console.

ERROR TypeError: control.registerOnChange is not a function
at setUpModelChangePipeline (forms.mjs:3117:13)
at setUpControl (forms.mjs:2947:5)
at FormGroupDirective.addControl (forms.mjs:4771:9)
at FormControlName._setUpControl (forms.mjs:5321:43)
at FormControlName.ngOnChanges (forms.mjs:5266:18)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1521:14)
at callHook (core.mjs:2444:18)
at callHooks (core.mjs:2403:17)
at executeInitAndCheckHooks (core.mjs:2354:9)
at refreshView (core.mjs:10341:21)

i use angular v15 and spring boot backend with spring data jpa

You are using a formArray in a wrong way. You should use formArrayName and index in the template and also need to add formControl when you get the list from the backend.

So the code should be like in TS

const accesoryListControl = this.form.get('accesoryList') as FormArray;
this.accesoryList.forEach((accesory) => {
  accesoryListControl.push(new FormControl(accesory.checked));
});

and in HTML

<div formArrayName="accesoryList">
  <div *ngFor="let accesory of accesoryList; index as index">
    <label>
      <input type="checkbox" [formControlName]="index" /> {{ accesory.name }}
    </label>
  </div>
</div>

I created an example at https://stackblitz.com/edit/angular-2sixzt?file=src%2Fmain.ts how to use it.