WIP state with new Reactive Form

micahstubbs · May 10, 2022 · f9e2e37 · f9e2e37
1 parent a01cf49
commit f9e2e37
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git a/helix-front/client/app/app.module.ts b/helix-front/client/app/app.module.ts
@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule  } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { Angulartics2Module, Angulartics2Piwik } from 'angulartics2';
@@ -26,6 +26,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
   imports: [
     BrowserModule,
     FormsModule,
+    ReactiveFormsModule,
     HttpClientModule,
     AppRoutingModule,
     Angulartics2Module.forRoot([ Angulartics2Piwik ]),

diff --git a/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.html b/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.html
@@ -17,34 +17,34 @@
   ~ under the License.
   -->
 
-<form (ngSubmit)="onSubmit()" #inputForm="ngForm">
+<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
   <h1 mat-dialog-title>{{ title }}</h1>
   <div mat-dialog-content>
     <section>
       {{ message }}
     </section>
     <section *ngFor="let name of getKeys(values)" [ngSwitch]="values[name].type">
       <section *ngSwitchCase="'boolean'">
-        {{ values[name].label }}:
+        {{ value.values[name].label }}:
         <mat-slide-toggle
           [name]="name"
-          [(ngModel)]="values[name].value">
-          {{ values[name].value ? 'True' : 'False' }}
+          formControlName="values[name].value">
+          {{ value.values[name].value ? 'True' : 'False' }}
         </mat-slide-toggle>
       </section>
       <mat-form-field *ngSwitchCase="'password'">
         <input matInput
           type="password"
           [name]="name"
-          [(ngModel)]="values[name].value"
-          [placeholder]="values[name].label"
+          formControlName="values[name].value"
+          placeholder="value.values[name].label"
           required>
       </mat-form-field>
       <mat-form-field *ngSwitchDefault>
         <input matInput
           [name]="name"
-          [(ngModel)]="values[name].value"
-          [placeholder]="values[name].label"
+          formControlName="values[name].value"
+          placeholder="values[name].label"
           required>
       </mat-form-field>
     </section>

diff --git a/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts b/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef } from '@angular/material';
 import { MAT_DIALOG_DATA } from '@angular/material';
+import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'hi-input-dialog',
@@ -11,7 +12,8 @@ export class InputDialogComponent implements OnInit {
 
   title: string;
   message: string;
-  values: any[];
+  // values: any[];
+  myForm: FormGroup;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) protected data: any,
@@ -21,16 +23,33 @@ export class InputDialogComponent implements OnInit {
   ngOnInit() {
     this.title = (this.data && this.data.title) || 'Input';
     this.message = (this.data && this.data.message) || 'Please enter:';
-    this.values = (this.data && this.data.values) || {
-      'input': {
-        label: 'Anything you want',
-        type: 'input'
-      }
-    };
+    // this.values = (this.data && this.data.values) || {
+    //   'input': {
+    //     label: 'Anything you want',
+    //     type: 'input'
+    //   }
+    // };
+    this.myForm = new FormGroup({
+      values: new FormControl((this.data && this.data.values) || {
+        'input': {
+          label: 'Anything you want',
+          type: 'input'
+        }
+      }) 
+    })
+    console.log(this.myForm)
   }
 
-  onSubmit() {
-    this.dialogRef.close(this.values);
+  // onSubmit() {
+  //   this.dialogRef.close(this.values);
+  // }
+
+  onSubmit(form: FormGroup) {
+    this.dialogRef.close(form.value.values);
+    console.log('Form Valid?', form.valid)
+    console.log('Title', form.value.title)
+    console.log('Message', form.value.message)
+    console.log('Values', JSON.stringify(form.value.values))
   }
 
   onCancel() {

diff --git a/helix-front/client/app/shared/shared.module.ts b/helix-front/client/app/shared/shared.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { NgxJsonViewerModule } from 'ngx-json-viewer';
@@ -28,6 +28,7 @@ import { DisabledLabelComponent } from './disabled-label/disabled-label.componen
     MaterialModule,
     FlexLayoutModule,
     FormsModule,
+    ReactiveFormsModule,
     NgxDatatableModule,
     NgxJsonViewerModule
   ],