refactored login component to use reactive forms

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index ae88858962ca1093400dc9061754d8f7af77d18e..6ca848ad37f521c4fb092594d1b00248e027075e 100644 (file)
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,15 +1,15 @@
-<form (ngSubmit)="onSubmit()">
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
   <label>
     Username:
-    <input type="text" [(ngModel)]="username" name="username" required>
+    <input type="text" formControlName="username">
   </label>
   <br>
   <label>
     Password:
-    <input type="password" [(ngModel)]="password" name="password" required>
+    <input type="password" formControlName="password">
   </label>
   <br>
-  <button type="submit" [disabled]="isLoading">Login</button>
+  <button type="submit" [disabled]="isLoading || form.invalid">Login</button>
 </form>
 <div *ngIf="error">{{ error }}</div>
-<div *ngIf="token">Welcome, {{ username }}! Your token is {{ token }}</div>
+<div *ngIf="token">Welcome, {{ form.value.username }}! Your token is {{ token }}</div>

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 20d2ddb9eb48f048afe2cd633c8a7b102792a43f..8de7ea8066cd085bcdb6edcb9ce06b8f6c9d36b2 100644 (file)
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,6 +1,6 @@
 import { Component, inject } from '@angular/core';
-import { NgIf } from '@angular/common';
-import { FormsModule } from "@angular/forms";
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
 import { Store } from '@ngrx/store';
 import { login } from '../store/login.actions';
 import { selectError, selectIsLoading, selectToken } from '../store/login.selectors';
@@ -8,8 +8,8 @@ import { selectError, selectIsLoading, selectToken } from '../store/login.select
 @Component({
   selector: 'app-login',
   imports: [
-    NgIf,
-    FormsModule,
+    CommonModule,
+    ReactiveFormsModule
   ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.less'
@@ -17,12 +17,18 @@ import { selectError, selectIsLoading, selectToken } from '../store/login.select
 export class LoginComponent {
   private store = inject(Store);
 
-  username : string|null = null;
-  password : string|null = null;
-  token : string|null = null;
-  error : string|null = null;
+  form: FormGroup;
+  error: string|null = null;
+  token: string|null = null;
   isLoading : boolean = false;
 
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      username: ['', Validators.required],
+      password: ['', Validators.required]
+    });
+  }
+
   ngOnInit() {
     this.store.select(selectToken).subscribe(token => (this.token = token));
     this.store.select(selectError).subscribe(error => (this.error = error));
@@ -30,6 +36,6 @@ export class LoginComponent {
   }
 
   onSubmit() {
-    this.store.dispatch(login({ username: this.username, password: this.password }));
+    this.store.dispatch(login({ username: this.form.value.username, password: this.form.value.password }));
   }
 }