No value accessor for form control name: 'canvas-zoom' after upgrading to Angular 15

Question

I just upgraded Angular & Angular Material to v15. I started to get various errors and I narrowed them down to one component that is using mat-slider.

The code was-

<mat-slider [min]="minZoom" [max]="maxZoom" step="0.1" [(ngModel)]="zoomValue" class="w-20"
            [disabled]="selectedFeature === EngagementFeature.PUSH"
            (input)="zoomChanged($event)"></mat-slider>

After I ran the migration-

ng generate @angular/material:mdc-migration

The code got changed to-

<mat-slider [min]="minZoom" [max]="maxZoom" step="0.1" [(ngModel)]="zoomValue" class="w-20"
            [disabled]="selectedFeature === EngagementFeature.PUSH" #ngSlider>
    <input matSliderThumb
           (input)="zoomChanged({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})"
           #ngSliderThumb="matSliderThumb"/>
</mat-slider>

Which I further cleaned up to-

<mat-slider [min]="minZoom" [max]="maxZoom" step="0.1" [(ngModel)]="zoomValue" class="w-20"
            [disabled]="selectedFeature === EngagementFeature.PUSH" name="canvas-zoom">
    <input matSliderThumb (dragEnd)="zoomChanged($event)"/>
</mat-slider>

And I started getting this error-

ERROR Error: NG01203: No value accessor for form control name: 'canvas-zoom'. Find more at https://angular.io/errors/NG01203
    at _throwMissingValueAccessorError (forms.mjs:3165:11)
    at setUpControl (forms.mjs:2938:13)
    at NgModel._setUpStandalone (forms.mjs:4025:9)
    at NgModel._setUpControl (forms.mjs:4013:37)
    at NgModel.ngOnChanges (forms.mjs:3972:18)
    at NgModel.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1574:14)
    at callHook (core.mjs:2498:18)
    at callHooks (core.mjs:2457:17)
    at executeInitAndCheckHooks (core.mjs:2408:9)
    at selectIndexInternal (core.mjs:9153:17)

I tried to dig into the stacktrace but nothing helped. I also tried to set the name attribute without success. Followed the migration doc as well.

Answer 1

Upon comparing the v14 documentation https://v14.material.angular.io/components/slider/api#MatSlider, I realised that @Input() value & @Output() input properties are no longer available in mat-slider in v15.

Since they introduced MatSliderThumb, which now have @Input() value & @Output() valueChanges property, so the fix was to move [(ngModel)] (or formControl) to matSliderThumb-

<mat-slider [min]="minZoom" [max]="maxZoom" step="0.1" class="w-20"
            [disabled]="selectedFeature === EngagementFeature.PUSH">
    <input matSliderThumb (dragEnd)="zoomChanged($event)" [(ngModel)]="zoomValue"/>
</mat-slider>