browser/libs/angular/src/directives/input-verbatim.directive.ts

import { Directive, ElementRef, Input, Renderer2 } from "@angular/core";

@Directive({
  selector: "[appInputVerbatim]",
})
export class InputVerbatimDirective {
  @Input() set appInputVerbatim(condition: boolean | string) {
    this.disableComplete = condition === "" || condition === true;
  }

  private disableComplete: boolean;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
  ) {}

  ngOnInit() {
    if (this.disableComplete && !this.el.nativeElement.hasAttribute("autocomplete")) {
      this.renderer.setAttribute(this.el.nativeElement, "autocomplete", "off");
    }
    if (!this.el.nativeElement.hasAttribute("autocapitalize")) {
      this.renderer.setAttribute(this.el.nativeElement, "autocapitalize", "none");
    }
    if (!this.el.nativeElement.hasAttribute("autocorrect")) {
      this.renderer.setAttribute(this.el.nativeElement, "autocorrect", "none");
    }
    if (!this.el.nativeElement.hasAttribute("spellcheck")) {
      this.renderer.setAttribute(this.el.nativeElement, "spellcheck", "false");
    }
    if (!this.el.nativeElement.hasAttribute("inputmode")) {
      this.renderer.setAttribute(this.el.nativeElement, "inputmode", "verbatim");
    }
  }
}