Custom map codes!

src/app/views/home/home.component.html

@@ -8,10 +8,11 @@
     </button>
     <div class="w-100 mt-3">
         <form class="input-group">
-            <input type="text" class="form-control" [(ngModel)]="code" name="code" placeholder="Code">
+            <input type="text" class="form-control" [(ngModel)]="code" name="code" placeholder="Code" (keyup)="isValid()">
             <div class="input-group-append">
-                <button class="btn btn-danger" [routerLink]="['/', code]" style="background-color: #dd0330" [disabled]="code.length != 8">Open</button>
+                <button class="btn btn-danger" [routerLink]="['/', code]" style="background-color: #dd0330" [disabled]="!valid || code.length < 4">Open</button>
             </div>
+            <small *ngIf="!valid && code.length > 3" class="mt-2 text-danger">Codes can only be made up of letters and numbers!</small>
         </form>
     </div>
 </div>

src/app/views/home/home.component.ts

@@ -11,6 +11,7 @@ const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 })
 export class HomeComponent {
     code: string = '';
+    valid = false;
 
     constructor(private syncService: SyncService, private router: Router) { }
 
@@ -21,4 +22,8 @@ export class HomeComponent {
         } while (await this.syncService.exists(mapCode));
         return this.router.navigate(['/', mapCode]);
     }
+
+    isValid() {
+        this.valid = !this.code.split('').filter(c => chars.indexOf(c) == -1).length
+    }
 }