add form validations

src/pages/add/single-wallet/single-wallet.html

@@ -5,10 +5,10 @@
 </ion-header>
 
 <ion-content>
-  <form (ngSubmit)="create()">
+  <form [formGroup]="createForm" (ngSubmit)="create()">
     <ion-item>
-      <ion-label>Wallet name</ion-label>
-      <ion-input type="text" [(ngModel)]="formData.walletName" name="walletName"></ion-input>
+      <ion-label stacked>Wallet name</ion-label>
+      <ion-input type="text" [(ngModel)]="formData.walletName" formControlName="walletName" required></ion-input>
     </ion-item>
 
     <ion-item-divider color="light"></ion-item-divider>
@@ -20,31 +20,31 @@
 
     <div *ngIf="showAdvOpts">
       <ion-item>
-        <ion-label>Wallet service URL</ion-label>
-        <ion-input type="text" [(ngModel)]="formData.bwsURL" name="bwsURL"></ion-input>
+        <ion-label stacked>Wallet service URL</ion-label>
+        <ion-input type="text" [(ngModel)]="formData.bwsURL" formControlName="bwsURL"></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label>Wallet key</ion-label>
-        <ion-select [(ngModel)]="formData.selectedSeed.id" name="selectedSeed" (ionChange)="seedOptionsChange(formData.selectedSeed.id)">
+        <ion-label stacked>Wallet key</ion-label>
+        <ion-select [(ngModel)]="formData.selectedSeed.id" formControlName="selectedSeed" (ionChange)="seedOptionsChange(formData.selectedSeed.id)">
           <ion-option *ngFor="let opt of seedOptions" [value]="opt.id">{{opt.label}}</ion-option>
         </ion-select>
       </ion-item>
       
       <ion-item>
-        <ion-label>Add a password</ion-label>
-        <ion-toggle [(ngModel)]="formData.addPassword" name="addPassword"></ion-toggle>
+        <ion-label stacked>Add a password</ion-label>
+        <ion-toggle [(ngModel)]="formData.addPassword" formControlName="addPassword" (ionChange)="resetPasswordFields()"></ion-toggle>
       </ion-item>
 
       <div *ngIf="formData.addPassword">
         <ion-item>
-          <ion-label>Password</ion-label>
-          <ion-input type="password" [(ngModel)]="formData.passphrase" name="passphrase"></ion-input>
+          <ion-label stacked>Password</ion-label>
+          <ion-input type="password" [(ngModel)]="formData.password" formControlName="password"></ion-input>
         </ion-item>
   
         <ion-item>
-          <ion-label>Repeat password</ion-label>
-          <ion-input type="password" [(ngModel)]="formData.repeatPassphrase" name="repeatPassphrase"></ion-input>
+          <ion-label stacked>Confirm password</ion-label>
+          <ion-input type="password" [(ngModel)]="formData.confirmPassword" formControlName="confirmPassword"></ion-input>
         </ion-item>
 
         <ion-item>
@@ -52,18 +52,23 @@
             <strong translate>This password cannot be recovered. If the password is lost, there is no way you could recover your funds.</strong>
           </div>
         </ion-item>
+
+        <ion-item>
+          <ion-label stacked>I have written it down</ion-label>
+          <ion-checkbox [(ngModel)]="formData.writtenDown" formControlName="writtenDown" checked="false"></ion-checkbox>
+        </ion-item>
       </div>
 
       <ion-item>
-        <ion-label>Testnet</ion-label>
-        <ion-toggle [(ngModel)]="formData.testnet" name="testnet"></ion-toggle>
+        <ion-label stacked>Testnet</ion-label>
+        <ion-toggle [(ngModel)]="formData.testnet" formControlName="testnet"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Single address</ion-label>
-        <ion-toggle [(ngModel)]="formData.singleAddress" name="singleAddress"></ion-toggle>
+        <ion-label stacked>Single address</ion-label>
+        <ion-toggle [(ngModel)]="formData.singleAddress" formControlName="singleAddress"></ion-toggle>
       </ion-item>
     </div>
-    <button ion-button type="submit" block>Add Todo</button>
+    <button ion-button block type="submit" [disabled]="!createForm.valid || (formData.addPassword && !formData.writtenDown)">Create wallet</button>
   </form>
 </ion-content>

src/pages/add/single-wallet/single-wallet.ts

@@ -1,28 +1,68 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NavController } from 'ionic-angular';
+import { Validators, FormBuilder, FormGroup } from '@angular/forms';
+
 import { AppProvider } from '../../../providers/app/app';
 
 @Component({
   selector: 'page-single-wallet',
   templateUrl: 'single-wallet.html'
 })
-export class SingleWalletPage {
+export class SingleWalletPage implements OnInit{
   public formData: any;
   public showAdvOpts: boolean;
   public seedOptions: any;
 
   private appName: string;
+  private createForm: FormGroup;
 
-  constructor(public navCtrl: NavController, private app: AppProvider) {
+  constructor(
+    public navCtrl: NavController, 
+    private app: AppProvider,
+    private fb: FormBuilder
+  ) {
     this.showAdvOpts = false;
     this.formData = {
+      walletName: null,
       bwsURL: 'https://bws.bitpay.com/bws/api',
       addPassword: false,
-      passphrase: null,
-      repeatPassphrase: null,
+      password: null,
+      confirmPassword: null,
+      writtenDown: false,
       testnet: false,
       singleAddress: false,
     };
+    this.appName = this.app.info.name;
+    this.updateSeedSourceSelect(1);
+  }
+
+  ngOnInit() {
+    this.createForm = this.fb.group({
+      walletName: ['', Validators.required],
+      bwsURL: [''],
+      selectedSeed: [''],
+      addPassword: [''],
+      password: [''],
+      confirmPassword: [''],
+      writtenDown: ['false'],
+      testnet: [''],
+      singleAddress: [''],
+    });
+
+    this.createForm.get('addPassword').valueChanges.subscribe((addPassword: boolean) => {
+      if (addPassword) {
+        this.createForm.get('password').setValidators([Validators.required]);
+        this.createForm.get('confirmPassword').setValidators([Validators.required]);
+      }else {
+        this.createForm.get('password').clearValidators();
+        this.createForm.get('confirmPassword').clearValidators();
+      }
+      this.createForm.get('password').updateValueAndValidity();
+      this.createForm.get('confirmPassword').updateValueAndValidity();
+    })
+  }
+
+  updateSeedSourceSelect(n: number) {
     this.seedOptions = [{
       id: 'new',
       label: 'Random',
@@ -32,28 +72,23 @@ export class SingleWalletPage {
       label: 'Specify Recovery Phrase...',
       supportsTestnet: false
     }];
-    this.appName = this.app.info.name;
-    this.updateSeedSourceSelect(1);
-  }
-
-  updateSeedSourceSelect(n: number) {
     this.formData.selectedSeed = {
       id: this.seedOptions[0].id
     };
 
     /* Disable Hardware Wallets for BitPay distribution */
-    var seedOptions = [];
+    var opts = [];
 
     if (this.appName == 'copay') {
       // if (n > 1 && walletService.externalSource.ledger.supported)
-      //   seedOptions.push({
+      //   opts.push({
       //     id: walletService.externalSource.ledger.id,
       //     label: walletService.externalSource.ledger.longName,
       //     supportsTestnet: walletService.externalSource.ledger.supportsTestnet
       //   });
 
       // if (walletService.externalSource.trezor.supported) {
-      //   seedOptions.push({
+      //   opts.push({
       //     id: walletService.externalSource.trezor.id,
       //     label: walletService.externalSource.trezor.longName,
       //     supportsTestnet: walletService.externalSource.trezor.supportsTestnet
@@ -61,15 +96,14 @@ export class SingleWalletPage {
       // }
 
       // if (walletService.externalSource.intelTEE.supported) {
-      //   seedOptions.push({
+      //   opts.push({
       //     id: walletService.externalSource.intelTEE.id,
       //     label: walletService.externalSource.intelTEE.longName,
       //     supportsTestnet: walletService.externalSource.intelTEE.supportsTestnet
       //   });
       // }
     }
-    this.seedOptions = this.seedOptions.concat(seedOptions);
-    console.log('Seed options:', this.seedOptions);
+    this.seedOptions = this.seedOptions.concat(opts);
   };
 
   seedOptionsChange(seed: any) {
@@ -78,11 +112,12 @@ export class SingleWalletPage {
   }
 
   resetPasswordFields() {
-    this.formData.passphrase = 
-    this.formData.createPassphrase = 
-    this.formData.passwordSaved = 
-    this.formData.repeatPassword = 
-    // this.result = 
-    null;
+    this.formData.password = null;
+    this.formData.confirmPassword = null;
+    this.formData.writtenDown = false;
+  }
+
+  create() {
+    console.log(this.formData);
   }
 }