Angular指令传递复杂对象问题：[control]属性未被识别

核心原因 #

你遇到的问题根源是指令选择器和模板中使用的指令名称不匹配：

• 指令的selector写的是[appDateEventsInput]
• 模板里用的指令却是appDateInputEvents（单词顺序反了）

Angular没识别到指令被应用在input上，自然会把[control]当成未知属性；去掉方括号时，Angular把它当成普通DOM属性，所以值会被解析成字符串。

修复步骤 #

1. 统一指令名称
   把指令的selector改成和模板中一致的名称，比如保持模板里的appDateInputEvents：

   @Directive({
     selector: '[appDateInputEvents]', // 修正为和模板匹配的选择器
     standalone: true,
   })
   export class DateInputEventsDirective {
     constructor() { }
   
     @Input() control!: AbstractControl;
   
     // 其他业务代码
   }
   

2. 保持正确的属性绑定方式
   模板里的[control]="fieldGroup.get('date')"写法是对的，方括号用于传递表达式结果（这里是FormControl对象），而非字符串，无需修改：

   <input matInput appDateInputEvents [control]="fieldGroup.get('date')">
   

额外提示 #

因为FormGroup.get()返回的是AbstractControl|null，如果能确保'date'字段一定存在，可以在模板里用非空断言：

<input matInput appDateInputEvents [control]="fieldGroup.get('date')!">

或者修改指令的输入属性类型，允许空值：

@Input() control?: AbstractControl;

内容的提问来源于stack exchange，提问作者oscurodrago