Welcome to the lesson on template-driven forms in Angular! In this lesson, we'll explore how template-driven forms work and why they are an essential part of Angular applications. Template-driven forms are particularly useful for smaller applications or when you're just getting started with Angular, as they offer simplicity and ease of use. Unlike reactive forms, which are more structured and suitable for complex scenarios, template-driven forms allow you to define your form directly in the template, making them more intuitive for beginners. Let's dive in and see how we can set up and validate these forms effectively. 🌟

To begin with, let's set up a basic template-driven form. This involves using Angular directives like ngModel to bind form inputs to component properties. This binding allows for two-way data binding, meaning any changes in the input field will automatically update the component property and vice versa.

TypeScript
Copy to clipboard
1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-login-form',
5  templateUrl: './login.component.html'
6})
7export class LoginFormComponent {
8  model = {
9    username: '',
10    password: ''
11  };
12}

HTML, XML
Copy to clipboard
1<form>
2  <div>
3    <label for="username">Username:</label>
4    <input type="text" id="username" [(ngModel)]="model.username" name="username" />
5  </div>
6  <div>
7    <label for="password">Password:</label>
8    <input type="password" id="password" [(ngModel)]="model.password" name="password" />
9  </div>
10</form>

In this example, we have a simple form with two input fields: one for the username and one for the password. The [(ngModel)] directive is used to bind each input field to a property in the model object. This setup allows for two-way data binding, ensuring that any changes in the input fields are reflected in the component's model and vice versa.

Now that we have a basic form set up, let's add some validation to ensure that users provide the necessary information. Angular provides built-in validators like required, minlength, and maxlength to help with this.

HTML, XML
Copy to clipboard
1<form #loginForm="ngForm">
2  <div>
3    <label for="username">Username:</label>
4    <input
5      type="text"
6      id="username"
7      name="username"
8      [(ngModel)]="model.username"
9      required
10      #username="ngModel"
11    />
12  </div>
13  <div>
14    <label for="password">Password:</label>
15    <input
16      type="password"
17      id="password"
18      name="password"
19      [(ngModel)]="model.password"
20      required
21      maxlength="20"
22      #password="ngModel"
23    />
24  </div>
25</form>

In this code snippet, we've added the required attribute to both the username and password input fields and the maxlength attribute to the password input field. This ensures that users cannot submit the form without providing correct values for these fields. The #username="ngModel" and #password="ngModel" directives are used to create local template variables that reference the ngModel directive, allowing us to access the form control's state.

To enhance the user experience, it's important to provide feedback when validation errors occur. Angular's form state properties like touched, dirty, and invalid can be used to display error messages based on the form's validation state:

• touched: This property becomes true when the user has interacted with the form control, such as clicking into and then out of the input field. It indicates that the user has "touched" the field.
• dirty: This property is true when the user has changed the value of the form control. It signifies that the field's value has been altered from its original state.
• invalid: This property is true when the form control's value does not meet the defined validation criteria. It indicates that the field is in an invalid state according to the specified validators.

HTML, XML
Copy to clipboard
1<div>
2  <label for="username">Username:</label>
3  <input
4    type="text"
5    id="username"
6    name="username"
7    [(ngModel)]="model.username"
8    required
9    #username="ngModel"
10  />
11  
12  @if (username.invalid && (username.touched || username.dirty)) {
13    @if (username.errors?.['required']) {
14        <p>Username is required.</p>
15    }
16  }
17</div>

Here, we use Angular's structural directive @if to conditionally display an error message if the username field is invalid and has been touched or is dirty. This means the error message will only appear if the user has interacted with the field and left it in an invalid state. The username.errors?.['required'] checks if the required validation error is present.

Let's put everything together and build a simple login form with validation and user feedback. This form will include both username and password fields, each with required validation.

TypeScript
Copy to clipboard
1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-login-form',
5  templateUrl: './login.component.html'
6})
7export class LoginFormComponent {
8  model = {
9    username: '',
10    password: ''
11  };
12
13  onSubmit(form: any) {
14    console.log('Login Successful', form);
15  }
16}

HTML, XML
Copy to clipboard
1<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
2    <div>
3      <label for="username">Username:</label>
4      <input
5        type="text"
6        id="username"
7        name="username"
8        [(ngModel)]="model.username"
9        required
10        #username="ngModel"
11      />
12      @if(username.invalid && (username.touched || username.dirty)) {
13        @if(username.errors?.['required']) {
14          <p>Username is required.</p>
15        }
16      }
17    </div>
18    
19    <div>
20      <label for="password">Password:</label>
21      <input
22        type="password"
23        id="password"
24        name="password"
25        [(ngModel)]="model.password"
26        required
27        #password="ngModel"
28      />
29      @if(password.invalid && (password.touched || password.dirty)) {
30        @if(password.errors?.['required']) {
31          <p>Password is required.</p>
32        }
33      }
34    </div>
35    
36    <button type="submit" [disabled]="loginForm.invalid">Login</button>
37</form>

In this complete example, we have a login form with both username and password fields, each with required validation. The form is submitted using the (ngSubmit) directive, which calls the onSubmit method when the form is valid. The submit button is disabled if the form is invalid, ensuring that users cannot submit incomplete forms. The onSubmit method logs a success message to the console, simulating a successful login.

In this lesson, we explored the world of template-driven forms in Angular. We learned how to set up a basic form, implement validation, and provide user feedback for validation errors. By building a simple login form, we applied these concepts in a practical context, enhancing our understanding of how template-driven forms work.

As you move on to the practice exercises, you'll have the opportunity to reinforce these skills and experiment with different validation scenarios. In future lessons, we'll delve into more advanced topics like custom validators and explore the differences between template-driven and reactive forms. Keep practicing, and soon you'll be building robust forms with ease! 🎉