Angular指令中如何区分按钮type是显式设置还是默认submit？

问题的核心在于区分DOM元素的属性（property）和特性（attribute）：浏览器会为未显式设置type的按钮默认赋予type="submit"属性值，但此时HTML中并没有对应的type特性。要区分显式设置和默认值，需要检查元素是否存在type特性，而非直接读取type属性。

修改后的指令代码如下：

@Directive({selector: 'button[my-directive]'})
class MyDirective implements AfterViewInit {
  el = inject(ElementRef) as ElementRef<HTMLButtonElement>;

  ngAfterViewInit() {
    // 仅当未显式设置type特性时，修改为type="button"
    if (!this.el.nativeElement.hasAttribute('type')) {
      this.el.nativeElement.type = 'button';
    }
  }
}

原理说明 #

• this.el.nativeElement.type：读取的是DOM元素的属性，浏览器会为无显式type的按钮默认填充submit，无法区分默认值和显式设置。
• this.el.nativeElement.hasAttribute('type')：检查的是HTML中的特性，只有当按钮在HTML里明确写了type="xxx"时才会返回true，否则返回false，以此精准判断是否需要修改按钮类型。

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