Using Patterns

Whole Number (no negatives)

<input type="number" pattern="^([+,0-9]+)" />

Whole Number (with negatives)

<input type="number" pattern="^([-+,0-9]+)" />

Decimal (no negatives)

<input type="number" pattern="^([+,0-9.]+)" />

Decimal (with negatives)

<input type="number" pattern="^([-+,0-9.]+)" />

0-100 (Ratio)

<input min="0" max="100" step="1" pattern="(100|[1-9][0-9]|[0-9])" />

No special chars (min 4, max 10)

<input pattern="(^[a-zA-Z0-9]{4,10}$)" />

Full Sample

autoSetShares(e): void {
  var elem = e.target;
  //elem.validity props on input '123':
    //badInput: false
    //customError: false
    //patternMismatch: false
    //rangeOverflow: true
    //rangeUnderflow: false
    //stepMismatch: false
    //tooLong: false
    //tooShort: false
    //typeMismatch: false
    //valid: false
    //valueMissing: false
  if (elem.validity.valid) {
    // is valid
  }
}

<div class="form-group m-form__group">
  <label [formCtrl]="PartnerRevenueShare">
    {{l("PartnerRevenueShare")}}
  </label>
  <div class="input-group">
    <input type="number" class="form-control"
      id="PartnerRevenueShare" name="partnerRevenueShare"
      #PartnerRevenueShare="ngModel"
      [(ngModel)]="relationship.partnerRevenueShare"
      min="0" max="100" step="1" required
      pattern="(100|[1-9][0-9]|[0-9])"
      (change)="autoSetShares($event)">
    <div class="input-group-append">
      <span class="input-group-text">
        <i class="fa fa-percent" style="color: var(--secondary)"></i>
      </span>
    </div>
  </div>
  <validation-messages [formCtrl]="PartnerRevenueShare"></validation-messages>
</div>

Using Keypress

Numeric only (no returns)

<input type="number" min="0" (keypress)="isKeyPressNumeric($event)" />

isKeyPressNumeric(event): boolean {
  return (event.charCode === 8 || event.charCode === 0)
    ? null
    : event.charCode >= 48 && event.charCode <= 57;
}

Using Keydown

No spaces

<input (keydown.space)="$event.preventDefault()">