Template Driven Form Validation

Template driven forms are forms where we write logic, validations, controls etc, in html code. Template driven forms are suitable for simple scenarios, uses two way data binding using the [(NgModel)] syntax.

Simple Form Validation

This field is required!
email must be valid!
Username: {{ TDNameVar }}

Email: {{ TDEmailVar }}
            

Validating Multiple Rules

This field is required!
email must be valid!
Password is required. Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters.
Confirm password is required. Password & Confirm Password does not match.

Inputs Validation

This field is required!
The numeric field may only contain numeric characters.
The alphabetic field may only contain alphabet characters.
password is required. Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters.
Confirm password is required. Password & Confirm Password does not match.
Must be a valid email!
Enter Number between 10 & 20!
The regex field format is invalid!
The min field must be at least 3 characters!
The digits field must be numeric and exactly contain 3 digits!
Must Enter Character, Number, Dash or Uderscore!
Must be a valid url!

Reactive Form Validation

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. Validate form values, and create dynamic forms where you can add or remove controls at run time.

Reactive forms are more robust: they’re more scalable, reusable, and testable. If forms are a key part of your application, use reactive forms

User Details Form with Validation

1. Account Details
Username is required
Email is required
Email must be a valid email address
Password is required
Password must be at least 6 characters
Confirm Password is required
Confirm Password must be at least 6 characters
Passwords must match
2. Personal Info
First Name is required
Last Name is required
country is required
language is required
Age is required
Phone Number is required