Form Handling

Let’s add a form to the UserComponent to allow adding new users. We’ll use Angular’s Reactive Forms module for this purpose.

Generate a New Component

ng generate component add-user

Import ReactiveFormsModule

Update src/app/app.module.ts to import ReactiveFormsModule:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
})
export class AppModule { }

Create the Add User Form

Modify src/app/add-user/add-user.component.ts to create a form:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from '../user.service';

@Component({
  selector: 'app-add-user',
  template: `
    <h1>Add User</h1>
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input id="name" formControlName="name">
      <div *ngIf="userForm.controls.name.invalid && userForm.controls.name.touched">
        Name is required.
      </div>
      
      <label for="email">Email:</label>
      <input id="email" formControlName="email">
      <div *ngIf="userForm.controls.email.invalid && userForm.controls.email.touched">
        Valid email is required.
      </div>
      
      <button type="submit" [disabled]="userForm.invalid">Add User</button>
    </form>
  `
})
export class AddUserComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder, private userService: UserService) {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      this.userService.addUser(this.userForm.value).subscribe(() => {
        alert('User added successfully!');
        this.userForm.reset();
      });
    }
  }
}

Add a Method to UserService

Update src/app/user.service.ts to include a method for adding users:

addUser(user: any): Observable<any> {
  return this.http.post<any>(this.apiUrl, user);
}

Add Route for Add User Component

Update src/app/app-routing.module.ts:

import { AddUserComponent } from './add-user/add-user.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'user', component: UserComponent },
  { path: 'add-user', component: AddUserComponent }
];