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.
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>