fix(ivy): incorrectly remapping certain properties that refer inputs (#28765)

During build time we remap particular property bindings, because their names don't match their attribute equivalents (e.g. the property for the `for` attribute is called `htmlFor`). This breaks down if the particular element has an input that has the same name, because the property gets mapped to something invalid.

The following changes address the issue by mapping the name during runtime, because that's when directives are resolved and we know all of the inputs that are associated with a particular element.

PR Close #28765

packages/core/src/render3/instructions.ts

@@ -1213,6 +1213,18 @@ export function componentHostSyntheticProperty<T>(
   elementPropertyInternal(index, propName, value, sanitizer, nativeOnly, loadComponentRenderer);
 }
 
+/**
+ * Mapping between attributes names that don't correspond to their element property names.
+ */
+const ATTR_TO_PROP: {[name: string]: string} = {
+  'class': 'className',
+  'for': 'htmlFor',
+  'formaction': 'formAction',
+  'innerHtml': 'innerHTML',
+  'readonly': 'readOnly',
+  'tabindex': 'tabIndex',
+};
+
 function elementPropertyInternal<T>(
     index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null,
     nativeOnly?: boolean,
@@ -1233,6 +1245,8 @@ function elementPropertyInternal<T>(
       }
     }
   } else if (tNode.type === TNodeType.Element) {
+    propName = ATTR_TO_PROP[propName] || propName;
+
     if (ngDevMode) {
       validateAgainstEventProperties(propName);
       validateAgainstUnknownProperties(lView, element, propName, tNode);