Course Title: Mastering Angular: Building Scalable Web Applications Section Title: Forms and User Input Topic: Build a form-based application with validation and dynamic form controls.(Lab topic)

Introduction

In this lab topic, you'll learn how to build a form-based application with validation and dynamic form controls in Angular. You'll create a simple form that showcases the power of Angular forms and how to manage complex form workflows.

Creating the Application

Start by creating a new Angular project using the Angular CLI. Run the following command in your terminal:

ng new form-based-application

Navigate to the project directory:

cd form-based-application

Create a new component for the form:

ng generate component form

Creating the Form

In the form.component.html file, add the following code:

<form [formGroup]="form">
  <label>First Name:</label>
  <input formControlName="firstName" type="text">
  <label>Last Name:</label>
  <input formControlName="lastName" type="text">
  <label>Email:</label>
  <input formControlName="email" type="email">
  <button type="submit">Submit</button>
</form>

<div *ngIf="form.invalid">
  <p>Form is invalid</p>
</div>

<div *ngIf="form.valid">
  <p>Form is valid</p>
</div>

In the form.component.ts file, add the following code:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }
}

Validation

In the above code, we've added validation using Angular's built-in validators. We've made the first name, last name, and email fields required. We've also added an email validator to ensure the email is in the correct format.

Dynamic Form Controls

Let's say you want to add a new form control dynamically when the user clicks a button. You can do this by using the FormArray class. Add the following code to the form.component.ts file:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      addresses: new FormArray([this.createAddressFormGroup()])
    });
  }

  createAddressFormGroup(): FormGroup {
    return new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    });
  }

  addAddress(): void {
    const addresses = this.form.get('addresses') as FormArray;
    addresses.push(this.createAddressFormGroup());
  }
}

In the form.component.html file, add a button to add a new address:

<button type="button" (click)="addAddress()">Add Address</button>

Add a div to display the addresses:

<div formArrayName="addresses">
  <div *ngFor="let address of form.get('addresses').controls; let i = index">
    <label>Street:</label>
    <input formControlName="street" type="text">
    <label>City:</label>
    <input formControlName="city" type="text">
    <label>State:</label>
    <input formControlName="state" type="text">
    <label>Zip:</label>
    <input formControlName="zip" type="text">
  </div>
</div>

Conclusion

In this lab topic, you learned how to build a form-based application with validation and dynamic form controls in Angular. You created a simple form that showcases the power of Angular forms and how to manage complex form workflows.

For more information on forms in Angular, check out the official Angular documentation: https://angular.io/guide/forms

If you have any questions or need help with the lab topic, feel free to leave a comment below.

Next Topic: Using built-in pipes and creating custom pipes.