Input pattern (validation)
// Angular input pattern
### Force to UpperCase:
<input class="form-control" formControlName="rego" oninput="this.value = this.value.toUpperCase()">
### Only numbers with a maximum of 2 decimal places:
<input class="form-control" formControlName="tare" step="0.01" pattern="^[0-9]+(\.[0-9]{1,2})?$" placeholder="99.99 - only numbers with a maximum of 2 decimal places">
### Limit 4 and number only:
<input class="form-control" formControlName="postcode" [maxlength]="4" pattern="^-?[0-9]\d*(\9)?$" placeholder="0-9 number only">
### Email
<input type="email" class="form-control" formControlName="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="name@example.com">
<input autoComplete="email" cFormControl formControlName="Email" placeholder="Email" email="true" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" oninput="this.value = this.value.toLowerCase()" />
### multi line
<div class="form-group mb-2">
<label>Notes</label>
<textarea rows="3" class="form-control" formControlName="notes"></textarea>
</div>
### number only / number and space only
<div class="row">
<input class="form-control oneline2-3" formControlName="pin" pattern="^-?[0-9]\d*(\9)?$" placeholder="0-9 number only" />
<input class="form-control oneline2-3" formControlName="accountNumber" pattern="^[0-9\s]*$" placeholder="0-9 and space only" />
<input class="form-control oneline2-3" formControlName="billingAddress" />
</div>
// Some code
Last updated
Was this helpful?