确定 HTMLButtonElement.type 提交的原因

Determining why HTMLButtonElement.type is submit

提问人:Bryan Rayner 提问时间:4/29/2023 更新时间:4/29/2023 访问量:25

问:

我需要自动更改我的 Frankensteinian Angular / .NET WebForms 应用程序中的按钮类型,以便在将指令应用于按钮时。但是,我不想更改所有按钮;只是尚未显式设置为 的按钮。type="button"type="submit"

总之:

<button my-directive type="submit">An intentional Submit button</button>

<button my-directive>A button I would like to have changed to type="button" by my-directive</button>

Angular 指令代码:

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

  ngAfterViewInit() {
    if (!this.el.nativeElement.type) {
      this.el.nativeElement.type = 'button';
    }
  }
}

当我在调试器中单步执行时,“type”在两个按钮上都提交,即使尚未显式设置。如何检测差异?

HTML Angular 表单 DOM 按钮

评论

1赞 ceejayoz 4/29/2023
用。标记的默认值为 。getAttribute<button>typesubmit

答:

2赞 Bryan Rayner 4/29/2023 #1

显然,正确的代码是:

ngAfterViewInit() {
    if (!this.el.nativeElement.hasAttribute('type') || this.el.nativeElement.getAttribute('type') !== 'submit') {
      this.el.nativeElement.setAttribute('type', 'button');
    }
}