From: Kai Moritz <kai@juplo.de>
Date: Sun, 25 Dec 2022 21:35:36 +0000 (+0100)
Subject: feat: Added validation for the "Pick Name"-form
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=bf0043d15fe9e5326a1f0baceebd290a5e104f8a;p=demos%2Fkafka%2Fchat

feat: Added validation for the "Pick Name"-form
---

diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index 6108608d..b640cfd6 100644
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -6,10 +6,18 @@
     <div class="form-group">
       <div class="input-group input-group-primary">
         <label for="name" class="input-group-addon">Username</label>
-        <input id="name" type="text" class="form-control" placeholder="Enter your username" [formControl]="name">
+        <input id="name" type="text" class="form-control" placeholder="Enter your username" [formControl]="usernameForm">
+      </div>
+      <div *ngIf="usernameForm.invalid && (usernameForm.dirty || usernameForm.touched)"
+           class="alert alert-danger">
+
+        <div *ngIf="usernameForm.errors?.['required']">
+          Name is required.
+        </div>
       </div>
     </div>
-    <button type="submit" class="btn btn-primary" (click)="updateName()">Pick Name</button>
+    <button type="submit" class="btn btn-primary" (click)="updateName()" [disabled]="usernameForm.invalid">Pick Name</button>
   </div>
 </div>
-<p>Value: {{ name.value }}</p>
+<p>Value: {{ usernameForm.value }}</p>
+<p>Form Status: {{ usernameForm.status }}</p>
diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts
index 7e3caeb4..0ec30268 100644
--- a/src/app/user/user.component.ts
+++ b/src/app/user/user.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { Validators } from '@angular/forms';
 import { Router } from "@angular/router";
 import { UserService } from "../user.service";
 
@@ -10,10 +11,10 @@ import { UserService } from "../user.service";
 })
 export class UserComponent {
 
-  name = new FormControl('');
+  usernameForm = new FormControl('', Validators.required);
 
   updateName(): void {
-    var input = this.name.getRawValue();
+    var input = this.usernameForm.getRawValue();
     if (input !== null) {
       this.userService.setUser(input);
       this.router.navigate(['chatrooms'])