fix(forms): resolve host binding type issues (#60481)

crisbeto · alxhub · commit bdd5e204233e · 2025-03-20T11:55:52.000-07:00
Fixes some type issues that are being flagged now that we have type checking of host bindings. PR Close #60481
diff --git a/packages/forms/src/directives/checkbox_value_accessor.ts b/packages/forms/src/directives/checkbox_value_accessor.ts
@@ -46,7 +46,7 @@ const CHECKBOX_VALUE_ACCESSOR: Provider = {
 @Directive({
   selector:
     'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
-  host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
+  host: {'(change)': 'onChange($any($event.target).checked)', '(blur)': 'onTouched()'},
   providers: [CHECKBOX_VALUE_ACCESSOR],
   standalone: false,
 })
diff --git a/packages/forms/src/directives/default_value_accessor.ts b/packages/forms/src/directives/default_value_accessor.ts
@@ -90,10 +90,10 @@ export const COMPOSITION_BUFFER_MODE = new InjectionToken<boolean>(
   // https://github.com/angular/angular/issues/3011 is implemented
   // selector: '[ngModel],[formControl],[formControlName]',
   host: {
-    '(input)': '$any(this)._handleInput($event.target.value)',
+    '(input)': '_handleInput($any($event.target).value)',
     '(blur)': 'onTouched()',
-    '(compositionstart)': '$any(this)._compositionStart()',
-    '(compositionend)': '$any(this)._compositionEnd($event.target.value)',
+    '(compositionstart)': '_compositionStart()',
+    '(compositionend)': '_compositionEnd($any($event.target).value)',
   },
   providers: [DEFAULT_VALUE_ACCESSOR],
   standalone: false,
diff --git a/packages/forms/src/directives/number_value_accessor.ts b/packages/forms/src/directives/number_value_accessor.ts
@@ -47,7 +47,7 @@ const NUMBER_VALUE_ACCESSOR: Provider = {
 @Directive({
   selector:
     'input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]',
-  host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
+  host: {'(input)': 'onChange($any($event.target).value)', '(blur)': 'onTouched()'},
   providers: [NUMBER_VALUE_ACCESSOR],
   standalone: false,
 })
diff --git a/packages/forms/src/directives/range_value_accessor.ts b/packages/forms/src/directives/range_value_accessor.ts
@@ -48,8 +48,8 @@ const RANGE_VALUE_ACCESSOR: Provider = {
   selector:
     'input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]',
   host: {
-    '(change)': 'onChange($event.target.value)',
-    '(input)': 'onChange($event.target.value)',
+    '(change)': 'onChange($any($event.target).value)',
+    '(input)': 'onChange($any($event.target).value)',
     '(blur)': 'onTouched()',
   },
   providers: [RANGE_VALUE_ACCESSOR],
diff --git a/packages/forms/src/directives/select_control_value_accessor.ts b/packages/forms/src/directives/select_control_value_accessor.ts
@@ -102,7 +102,7 @@ function _extractId(valueString: string): string {
 @Directive({
   selector:
     'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
-  host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
+  host: {'(change)': 'onChange($any($event.target).value)', '(blur)': 'onTouched()'},
   providers: [SELECT_VALUE_ACCESSOR],
   standalone: false,
 })
