Form Validation

Validation States with Tooltips (Template Driven Form)

Use form.needs-validation and swap .{valid/invalid}-feedback with .{valid/invalid}-tooltip to display validation feedback in a styled tooltip.

Looks good!
Looks good!
Please provide a valid city.

Validation States with Tooltips (Reactive Form)

Use form.needs-validation and swap .{valid/invalid}-feedback with .{valid/invalid}-tooltip to display validation feedback in a styled tooltip.

Looks good!
Looks good!
Please provide a valid city.

Custom Validations

required error
minlength error
required error
rangelength error
pattern error
base64 error
creditCard error
date error
dateISO error
maxDate error
minDate error
digits error
email error
equal error
notEqual error
required error
equalTo error
required error
notEqualTo error
gt error
lt error
json error
max error
min error
number error
phone error
url error
uuid error