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 }
];