**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: ```bash ng new form-based-application ``` Navigate to the project directory: ```bash cd form-based-application ``` Create a new component for the form: ```bash ng generate component form ``` ### Creating the Form In the `form.component.html` file, add the following code: ```html <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: ```typescript 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: ```typescript 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: ```html <button type="button" (click)="addAddress()">Add Address</button> ``` Add a div to display the addresses: ```html <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](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.