allow only negative numbers in angular 5 textbox

Question

allow only negative numbers in angular 5 textbox

<mat-form-field class="col--sm-4 col--md-4 col--lg-6">
          <input type="number" matInput placeholder="Lower Band Rng" formControlName="lowerBoundNumber" required>
          <mat-error >Please enter Lower Band Rng</mat-error>
          <mat-hint>Enter Lower Band Rng here</mat-hint>
        </mat-form-field>

allow only negative numbers in angular 5 textbox

Please enter Lower Band Rng Enter Lower Band Rng here

Answer 1

If you want to create a mor generic solution, you could use a directive like this:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appNegativeNumber]'
})
export class NegativeNumberDirective {
  constructor(private el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    const initalValue = this.el.nativeElement.value;
    this.el.nativeElement.value = initalValue.replace(/[^-\d]*/g, '');
    if ( initalValue !== this.el.nativeElement.value) {
      event.stopPropagation();
    }
  }
}

// In your component template
<mat-form-field>
  <input matInput type="text" appNegativeNumber [pattern]="'-?\\d*'">
</mat-form-field>