Form Submission in Angular

Form submission in Angular involves collecting user inputs, validating them, and processing the form data. This tutorial covers the basics of handling form submission effectively in your Angular applications.

Setting Up Form Submission

To handle form submission, you need to set up a reactive form and define a method to process the form data when the user submits the form:

// 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({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', 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

  

    Name
    
    

      
Name is required
    
  
  

    Email
    
    

      
Email is required
      
Invalid email format
    
  
  

    Password
    
    

      
Password is required
    
  
  Submit

Handling Form Submission Logic

In the onSubmit method, you can handle the form submission logic. This can include making HTTP requests to send the form data to a server or other processing tasks:

// app.component.ts
import { HttpClient } from '@angular/common/http';
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, private http: HttpClient) {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      this.http.post('https://example.com/api/users', this.userForm.value)
        .subscribe(response => {
          console.log('Form submitted successfully!', response);
        }, error => {
          console.log('Form submission failed', error);
        });
    } else {
      console.log('Form is invalid');
    }
  }
}

// app.component.html

  

    Name
    
    

      
Name is required
    
  
  

    Email
    
    

      
Email is required
      
Invalid email format
    
  
  

    Password
    
    

      
Password is required
    
  
  Submit

Key Points

Conclusion

Handling form submission in Angular involves setting up a reactive form, validating user inputs, and processing the form data. By understanding and using form submission effectively, you can create robust and user-friendly forms in your Angular applications. Happy coding!