Breaking News: Grepper is joining You.com. Read the official announcement!

forcekeyuppercase angular

Vivacious Vendace answered on February 28, 2023 Popularity 1/10 Helpfulness 8/10

answer forcekeyuppercase angular

forcekeyuppercase angular

Comment

//You could create an Angular Directive which transforms all user input to uppercase.
//The Directive extends DefaultValueAccessor:

@Directive({
  selector: 'input[toUppercase]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => UpperCaseInputDirective),
    },
  ],
})
export class UpperCaseInputDirective extends DefaultValueAccessor {
  @HostListener('input', ['$event']) input($event: InputEvent) {
    const target = $event.target as HTMLInputElement;
    const start = target.selectionStart;

    target.value = target.value.toUpperCase();
    target.setSelectionRange(start, start);

    this.onChange(target.value);
  }

  constructor(renderer: Renderer2, elementRef: ElementRef) {
    super(renderer, elementRef, false);
  }
}

// Use the Directive like this on the input:

<input name="myTdfInput" type="text" [(ngModel)]="value" toUppercase>

The solution works in both Reactive Forms and Template Driven Forms.

See working demo on Stackblitz: https://stackblitz.com/edit/angular-input-field-to-accept-only-numbers-czivy3?file=src/app/to-uppercase.directive.ts

Credits for the solution go to: https://twitter.com/BartBurgov (See his tweet here: https://twitter.com/BartBurgov/status/1582394428748009477?s=20&t=RiefRcZ1B8IF42wp2rWzaQ)

Popularity 1/10 Helpfulness 8/10 Language typescript

Source: twitter.com

Tags: angular typescript

Link to this answer
Share Copy Link

Contributed on Feb 28 2023

Vivacious Vendace

0 Answers Avg Quality 2/10

forcekeyuppercase angular

Contents

More Related Answers

forcekeyuppercase angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.