fix(compiler): incorrectly matching directives on attribute bindings (#49713)

crisbeto · AndrewKushnir · commit 9de1e9da8fc7 · 2023-04-11T12:40:58.000-07:00
Fixes that the compiler was matching directives based on `attr` bindings which doesn't correspond to the runtime behavior. This wasn't a problem until now because the matched directives would basically be a noop, but they can cause issues with required inputs. PR Close #49713
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/test/diagnostics_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/test/diagnostics_spec.ts
@@ -1093,6 +1093,31 @@ class TestComponent {
         `TestComponent.html(1, 1): Required input 'customAlias' from directive HostDir must be specified.`
       ]);
     });
+
+    it('should not report missing required inputs for an attribute binding with the same name',
+       () => {
+         const messages = diagnose(
+             `<div [attr.maxlength]="123"></div>`, `
+                class MaxLengthValidator {
+                  maxlength: string;
+                }
+                class TestComponent {}
+              `,
+             [{
+               type: 'directive',
+               name: 'MaxLengthValidator',
+               selector: '[maxlength]',
+               inputs: {
+                 maxlength: {
+                   classPropertyName: 'maxlength',
+                   bindingPropertyName: 'maxlength',
+                   required: true
+                 },
+               },
+             }]);
+
+         expect(messages).toEqual([]);
+       });
   });
 
   // https://github.com/angular/angular/issues/43970
diff --git a/packages/compiler/src/render3/view/util.ts b/packages/compiler/src/render3/view/util.ts
@@ -7,7 +7,7 @@
  */
 
 import {ConstantPool} from '../../constant_pool';
-import {Interpolation} from '../../expression_parser/ast';
+import {BindingType, Interpolation} from '../../expression_parser/ast';
 import * as o from '../../output/output_ast';
 import {ParseSourceSpan} from '../../parse_util';
 import * as t from '../r3_ast';
@@ -279,7 +279,9 @@ export function getAttrsForDirectiveMatching(elOrTpl: t.Element|
     });
 
     elOrTpl.inputs.forEach(i => {
-      attributesMap[i.name] = '';
+      if (i.type === BindingType.Property) {
+        attributesMap[i.name] = '';
+      }
     });
     elOrTpl.outputs.forEach(o => {
       attributesMap[o.name] = '';
diff --git a/packages/compiler/test/render3/view/binding_spec.ts b/packages/compiler/test/render3/view/binding_spec.ts
@@ -72,6 +72,16 @@ function makeSelectorMatcher(): SelectorMatcher<DirectiveMeta[]> {
                            selector: '[hasInput]',
                            animationTriggerNames: null,
                          }]);
+  matcher.addSelectables(CssSelector.parse('[sameSelectorAsInput]'), [{
+                           name: 'SameSelectorAsInput',
+                           exportAs: null,
+                           inputs: new IdentityInputMapping(['sameSelectorAsInput']),
+                           outputs: new IdentityInputMapping([]),
+                           isComponent: false,
+                           isStructural: false,
+                           selector: '[sameSelectorAsInput]',
+                           animationTriggerNames: null,
+                         }]);
   return matcher;
 }
 
@@ -176,6 +186,17 @@ describe('t2 binding', () => {
       expect(consumer.name).toBe('HasInput');
     });
 
+    it('should not match directives on attribute bindings with the same name as an input', () => {
+      const template =
+          parseTemplate('<ng-template [attr.sameSelectorAsInput]="123"></ng-template>', '', {});
+      const binder = new R3TargetBinder(makeSelectorMatcher());
+      const res = binder.bind({template: template.nodes});
+      const el = template.nodes[0] as a.Element;
+      const input = el.inputs[0];
+      const consumer = res.getConsumerOfBinding(input);
+      expect(consumer).toEqual(el);
+    });
+
     it('should bind to the encompassing node when no directive input is matched', () => {
       const template = parseTemplate('<span dir></span>', '', {});
       const binder = new R3TargetBinder(makeSelectorMatcher());
