Angular Template-Driven Forms

Template-Driven Forms in Angular.

What Are Template-Driven Forms in Angular Exactly?

• Two-Way Data Binding: Use ngModel to bind data between typescript and html.
• Automatic Form Control: Angular is creating FormControl instances by default unless you specify otherwise.
• Built-in Validation: we can use HTML5 validation attributes (required, email) together with Angular's custom validators.

Your First Template-Driven Form from Scratch, Step by Step

Lets design a simple login form using template driven forms in angular

Step 1: Set Up the Angular Module

Make sure your AppModule includes FormsModule:

Step 2: Create the Template for the Form

Step 3: Handle Form Submission in Your Component

onSubmit(form: NgForm) {  
  if (form.valid) {  
    console.log('Form Data:', form.value);  
    // Send data to your backend here  
  }  
}  

Explanation:

• #loginForm="ngForm" provides a reference to the form's NgForm instance.
• ngModel binds input values with your component.
• (ngSubmit) is triggered when the user submits the form.

Adding Validation and Error Messages

Validation is vital to ensure that our input is a legal and meaningful data point. Here's how to present user-friendly error messages:

<div *ngIf="email.invalid && email.touched">  
  <span *ngIf="email.errors?.required">Email required.</span>  
  <span *ngIf="email.errors?.email">Incorrect format for email.</span>  
</div>  

<div *ngIf="password.invalid && password.touched">  
  <span *ngIf="password.errors?.required">Password is required.</span>  
  <span *ngIf="password.errors?.minlength">Password should contain at least 6 characters.</span>  
</div>  

Advantages and Disadvantages of Template-Driven Forms

Advantages:

• Easy Setup: Perfect for simple forms.
• Less Boilerplate: No need to manually declare FormControls.
• Familiar Syntax: Uses HTML and data binding, suitable for beginners.

Disadvantages:

• Limited Control: Difficult to perform things such as complex form management or dynamic validation with this model.
• Testing Challenges: The logic is in the template which makes unit tests harder.

Tips for Writing Template-Driven Forms

1. Keep It Simple: Template-driven forms are best for simple use cases like logins, and contact forms.
2. Use Built-in Validators: Combine custom Angular validators with HTML5 attributes for the strongest checks.
3. Organize Code Structure: Place complex logic in components where it makes sense.
4. Use NgModelGroup for Grouping: Group related fields such as billing and shipping addresses together.

Real time scenario: 

Create template driven form for user object which we will get from an api or from mock data:

1. Create user service class which will have api logic of getting user objects 
  i am providing sample syntax but you can use online mock data apis for this

2. Component logic: call user api from component and get data:

• Now we have a service with getuser and updateuser methods which will call apis and get data.
• we need to call getUser method and subscribe to it ,
• we will capture the response and store in our user object and use same object in html to populate data in form

3. Template driven form in html

• Do not forget to add name attribute while using ngModel  for template driven forms.
• Try to practice all the validations , here i haven given some sample for your reference.