registration form validation

Core/Core/ClientApp/src/app/registration/registration.component.css

+.errorInput {
+  color: red;
+}
+
 .wrapper {
   display: flex;
   min-height: 100vh;

Core/Core/ClientApp/src/app/registration/registration.component.html

 <div class=" wrapper">
   <div class="container">
     <div class="inner">
+      <div *ngIf="IsRegistrationValid == false && ErrorMessage!=''" class="errorInput">{{ErrorMessage}}</div>
       <p>Registrovat se:</p>
-      <form (submit)="registerUser($event)">
-        <input type="text" placeholder="jméno" id="username" />
-        <input type="password" placeholder="heslo" id="password" />
-        <input type="password" placeholder="heslo znovu" id="passwordCheck" />
-        <input type="submit" value="odeslat" />
+      <form [formGroup]="InsertForm" (submit)="registerUser($event)">
+        <div>
+          <input formControlName="Username" type="text" placeholder="jméno" id="username" />
+          <div *ngIf="Username.touched && Username.errors" class="errorInput"><span *ngIf="Username.hasError('required')">Vyplňte uživatelské jméno</span></div>
+        </div>
+        <div>
+          <input formControlName="Password" type="password" placeholder="heslo" id="password" />
+          <div *ngIf="Password.touched && Password.errors" class="errorInput"><span *ngIf="Password.hasError('required')">Vyplňte heslo</span></div>
+        </div>
+        <div>
+          <input formControlName="PasswordCheck" type="password" placeholder="heslo znovu" id="passwordCheck" pattern="{{ Password.value }}"/>
+          <div *ngIf="PasswordCheck.touched && PasswordCheck.errors" class="errorInput">
+            <span *ngIf="PasswordCheck.hasError('required')">Vyplňte kontrolní heslo</span>
+            <span *ngIf="PasswordCheck.errors.pattern">Hesla nejsou stejná</span>
+          </div>
+        </div>
+        <input type="submit" value="odeslat" [disabled]="InsertForm.invalid" />
       </form>
       <br /> <a routerLink="/login">Už jsem registrovaný</a>
     </div>

Core/Core/ClientApp/src/app/registration/registration.component.ts

 import { Component } from '@angular/core';
 import { RegistrationService } from './registration.service';
 import { Router } from '@angular/router';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 @Component({
   selector: 'app-registration',
@@ -10,12 +11,29 @@ import { Router } from '@angular/router';
 /** registration component*/
 export class RegistrationComponent {
-  constructor(private Router: Router, private registrationService: RegistrationService) { }
-  registerUser(event): void {
+  constructor(private Router: Router, private registrationService: RegistrationService, private FormBuilder: FormBuilder) { }
+  InsertForm: FormGroup;
+  Username: FormControl;
+  Password: FormControl;
+  PasswordCheck: FormControl;
+  ErrorMessage: string = '';
+  IsRegistrationValid: boolean = false;
+
+  ngOnInit() {
+    this.Username = new FormControl('', [Validators.required]);
+    this.Password = new FormControl('', [Validators.required]);
+    this.PasswordCheck = new FormControl('', [Validators.required, Validators.pattern(this.Password.value)]);
+    this.InsertForm = this.FormBuilder.group({
+      "Username": this.Username,
+      "Password": this.Password,
+      "PasswordCheck": this.PasswordCheck
+    });
+  }
+
+  registerUser(event): void {
     event.preventDefault();
-    console.log('registering user');
     const target = event.target;
     const username = target.querySelector('#username').value;
@@ -24,8 +42,16 @@ export class RegistrationComponent {
     this.registrationService.register(username, password, passwordCheck).subscribe((res) => {
       console.log('Registration successful: ', res.status.toString());
-      if (res.status = 1)
+      this.IsRegistrationValid = false;
+      if (res.status = 1) {
+        this.IsRegistrationValid = true;
         this.Router.navigate(['login']);
-    }, error => console.error(error));
+      }
+        
+    }, error => {
+        console.error(error);
+        this.IsRegistrationValid = false;
+        this.ErrorMessage = "Uživatelské jméno už existuje.";
+    });
   }
 }