29-01-24 - Creating forms with steps in Angular

modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.html

@@ -0,0 +1 @@
+<p>auth-form-email works!</p>

modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuthFormEmailComponent } from './auth-form-email.component';
+import { AuthFormComponent } from '../auth-form.component';
+
+describe('AuthFormEmailComponent', () => {
+  let component: AuthFormEmailComponent;
+  let fixture: ComponentFixture<AuthFormEmailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AuthFormEmailComponent],
+      providers: [AuthFormComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthFormEmailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.ts

@@ -0,0 +1,19 @@
+import { AuthFormComponent } from './../auth-form.component';
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'lib-auth-form-email',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './auth-form-email.component.html',
+  styleUrl: './auth-form-email.component.scss',
+})
+export class AuthFormEmailComponent implements OnInit {
+  constructor(private authformComponent: AuthFormComponent) {}
+
+  ngOnInit(): void {
+    // eslint-disable-next-line no-console
+    console.log(this.authformComponent.form.value);
+  }
+}

modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.html

@@ -0,0 +1 @@
+<p>auth-form-password works!</p>

modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuthFormPasswordComponent } from './auth-form-password.component';
+
+describe('AuthFormPasswordComponent', () => {
+  let component: AuthFormPasswordComponent;
+  let fixture: ComponentFixture<AuthFormPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AuthFormPasswordComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthFormPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'lib-auth-form-password',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './auth-form-password.component.html',
+  styleUrl: './auth-form-password.component.scss',
+})
+export class AuthFormPasswordComponent {}

modules/feature/auth/form/src/lib/auth-form/auth-form.component.html

@@ -1 +1,5 @@
-<p>auth-form works!</p>
+<form class="form" [formGroup]="form">
+  <mat-card class="form__card">
+    <router-outlet></router-outlet>
+  </mat-card>
+</form>

modules/feature/auth/form/src/lib/auth-form/auth-form.component.scss

@@ -0,0 +1,13 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+
+  &__card {
+    max-width: 400px;
+    width: 100%;
+    padding: 2rem;
+  }
+}

modules/feature/auth/form/src/lib/auth-form/auth-form.component.ts

@@ -1,11 +1,27 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'lib-auth-form',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterModule, MatCardModule, ReactiveFormsModule],
   templateUrl: './auth-form.component.html',
   styleUrl: './auth-form.component.scss',
 })
-export class AuthFormComponent {}
+export class AuthFormComponent {
+  form = new FormGroup({
+    email: new FormControl('', [Validators.required, Validators.email]),
+    password: new FormControl('', [
+      Validators.required,
+      Validators.minLength(6),
+    ]),
+  });
+}

modules/feature/auth/form/src/lib/lib.routes.ts

@@ -2,5 +2,33 @@ import { Route } from '@angular/router';
 import { AuthFormComponent } from './auth-form/auth-form.component';
 
 export const authFormRoutes: Route[] = [
-  { path: '', component: AuthFormComponent },
+  {
+    path: '',
+    component: AuthFormComponent,
+    children: [
+      {
+        path: 'email',
+        loadComponent: () =>
+          import('./auth-form/auth-form-email/auth-form-email.component').then(
+            (m) => m.AuthFormEmailComponent
+          ),
+      },
+      {
+        path: 'password',
+        loadComponent: () =>
+          import(
+            './auth-form/auth-form-password/auth-form-password.component'
+          ).then((m) => m.AuthFormPasswordComponent),
+      },
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'email',
+      },
+      {
+        path: '**',
+        redirectTo: 'email',
+      },
+    ],
+  },
 ];

src/app/app.routes.ts

@@ -17,6 +17,6 @@ export const appRoutes: Route[] = [
   },
   {
     path: 'auth',
-    loadComponent: () => import('auth-form').then((m) => m.AuthFormComponent),
+    loadChildren: () => import('auth-form').then((m) => m.authFormRoutes),
   },
 ];