Nested Forms in Angular

Nested forms in Angular allow you to create complex forms that are composed of multiple form groups. This tutorial covers the basics of creating and managing nested forms effectively in your Angular applications.

Setting Up Nested Forms

To set up nested forms, you need to create multiple form groups and nest them within each other. Here’s an example:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      personalDetails: this.fb.group({
        name: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]]
      }),
      address: this.fb.group({
        street: ['', Validators.required],
        city: ['', Validators.required],
        zip: ['', Validators.required]
      })
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log('Form submitted!', this.userForm.value);
      // Handle form submission logic here
    } else {
      console.log('Form is invalid');
    }
  }
}

// app.component.html

  

    
Personal Details
    

      Name
      
      

        
Name is required
      
    
    

      Email
      
      

        
Email is required
        
Invalid email format
      
    
  

  

    
Address
    

      Street
      
      

        
Street is required
      
    
    

      City
      
      

        
City is required
      
    
    

      Zip
      
      

        
Zip is required
      
    
  

  Submit

Key Points

Conclusion

Nested forms in Angular provide a powerful way to manage complex forms composed of multiple form groups. By understanding and using nested forms effectively, you can create robust and user-friendly forms in your Angular applications. Happy coding!