Make create form a reactive form

Breeze.UI/src/app/login/login.component.ts

 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
+
 import { GlobalService } from '../shared/services/global.service';
 import { ApiService } from '../shared/services/api.service';
 import { WalletLoad } from '../shared/classes/wallet-load';
-import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-login',

Breeze.UI/src/app/setup/create/create.component.html

@@ -2,26 +2,26 @@
 <h1>
   Please create a new wallet.
 </h1>
-<div class="form-group">
-  <label for="name">Name:</label>
-  <input class="form-control" type="text" #walletName required>
-</div>
-<div class="form-group">
-  <label for="password">Password:</label>
-  <input class="form-control" type="password" #walletPassword required>
-</div>
-<div class="form-group">
-  <label for="networklabel">Network:</label>
-  <select name="network" #walletNetwork>
+<form [formGroup]="createWalletForm" (ngSubmit)="onCreateClicked()">
+  <div class="form-group">
+    <label>Name:</label>
+    <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
+  </div>
+  <div class="form-group">
+    <label>Password:</label>
+    <input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet.">
+  </div>
+  <div class="form-group">
+    <label>Network:</label>
+    <select name="network" formControlName="selectNetwork">
       <option value="main">Main</option>
       <option value="test">Testnet</option>
     </select>
-</div>
-<div class="form-group">
-  <label for="path">Path:</label>
-  <input class="form-control" type="text" #walletPath required>
-</div>
-<button type="submit" (click)="createWallet(walletPassword.value, walletNetwork.value, walletPath.value, walletName.value)">Create</button>
+  </div>
+  <div class="form-group">
+    <button type="submit" [disabled]="!createWalletForm.valid" class="btn btn-success">Create Wallet</button>
+  </div>
+</form>
 <div>
   <label>Mnemonic:</label>
 </div>

Breeze.UI/src/app/setup/create/create.component.ts

 import { Component, Injectable } from '@angular/core';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 
+import { GlobalService } from '../../shared/services/global.service';
 import { ApiService } from '../../shared/services/api.service';
 
 import { WalletCreation } from '../../shared/classes/wallet-creation';
@@ -12,22 +14,28 @@ import { Mnemonic } from '../../shared/classes/mnemonic';
 })
 
 export class CreateComponent {
-  constructor(private apiService: ApiService) {}
+  constructor(private globalService: GlobalService, private apiService: ApiService, private fb: FormBuilder) {
+    this.createWalletForm = fb.group({
+      "walletName": ["", Validators.required],
+      "walletPassword": ["", Validators.required],
+      "selectNetwork": ["main", Validators.required]
+    });
+  }
 
   private newWallet: WalletCreation;
+  private createWalletForm: FormGroup;
 
   private responseMessage: string;
   private errorMessage: string;
 
-  private createWallet(password: string, network: string, folderPath: string, name: string, ) {
-    this.newWallet = new WalletCreation();
-    this.newWallet.password = password;
-    this.newWallet.network = network;
-    this.newWallet.folderPath = folderPath;
-    this.newWallet.name = name;
+  private onCreateClicked() {
+    this.newWallet = new WalletCreation(this.createWalletForm.get("walletPassword").value, this.createWalletForm.get("selectNetwork").value, this.globalService.getWalletPath(), this.createWalletForm.get("walletName").value);
+    this.createWallet(this.newWallet);
+  }
 
+  private createWallet(wallet: WalletCreation) {
     this.apiService
-      .createWallet(this.newWallet)
+      .createWallet(wallet)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400){

Breeze.UI/src/app/setup/setup-routing.module.ts

@@ -8,8 +8,8 @@ import { RecoverComponent } from './recover/recover.component';
 const routes: Routes = [
   { path: '', redirectTo: 'setup', pathMatch: 'full'},
   { path: 'setup', component: SetupComponent },
-  { path: 'setup/create', component: CreateComponent },
-  { path: 'setup/recover', component: RecoverComponent }
+  { path: 'create', component: CreateComponent },
+  { path: 'recover', component: RecoverComponent }
 ];
 
 @NgModule({

Breeze.UI/src/app/setup/setup.module.ts

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { SetupComponent } from './setup.component';
 import { CreateComponent } from './create/create.component';
@@ -12,6 +13,7 @@ import { RecoverComponent } from './recover/recover.component';
 @NgModule({
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     SetupRoutingModule,
     SharedModule.forRoot()
   ],

Breeze.UI/src/app/shared/classes/wallet-creation.ts

 export class WalletCreation {
+
+  constructor(password: string, network:string, folderPath: string, name: string) {
+    this.password = password;
+    this.network = network;
+    this.folderPath = folderPath;
+    this.name = name;
+  }
+
   password: string;
   network: string;
   folderPath: string;