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()">