Angular 中只允许一位小数和正数

Question

I have tried below code but it doesn't seem to be the perfect solution. Also, the keypress event does not work on mobile. I have tested on android google chrome. Please help if there is any perfect solution.

In HTML file I added keypress event.

<input type="text" name="xyz"(keypress)="numberOnlyWithDecimal($event,xyz)"[(ngModel)]="xyz">

In .ts file, I added this code.

numberOnlyWithDecimal(event, text): boolean {
    var regex = /^\d+(\.\d+)?$/;
    const charCode = (event.which) ? event.which : event.keyCode;
    if (text) {
      var test = text.split(".")
      this.textLength = test.length - 1;
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    if (!regex.test(charCode)) {
      return false
    }
    if (charCode == 46 && this.textLength ==1 ) {
      return false
    }
    return true;
  }

Answer 1

You can use Directive to implement that.

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

@Directive({
  selector: '[appInputOnlyDecimal]'
})
export class InputOnlyDecimalDirective {
  constructor(private ngControl: NgControl) {}

  @HostListener('input', ['$event.target.value'])
  public onInput(value: string) {
    // Your logic here
  }
}

Answer 2

I think something like this should do:

input type="number" min="0" max="9"