Submit Button

Client/src/app/components/add-transaction-page/add-transaction-page.component.html

@@ -1,9 +1,9 @@
 <div>&nbsp;</div>
 <h2 class="ml-1 mr-1 bb-1">Add Transactions</h2>
-<form [formGroup]="form">
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
     <div formArrayName="contributions" *ngFor="let item of form.get('contributions').controls; let i = index;">
       <div class="m-1 mt-2 bb-1" [formGroupName]="i">
-        <button class="w-5" mat-icon-button (click)="deleteContributor(i)">
+        <button class="w-5" type="button"  mat-icon-button (click)="deleteContributor(i)">
             <i ofbicon>delete_forever</i>
         </button> 
         <mat-form-field class="w-15">
@@ -19,7 +19,7 @@
         </mat-form-field>
         <div formArrayName="transactions" *ngFor="let trans of item.get('transactions').controls; let a = index;">
           <div [formGroupName]="a">
-              <button class="w-5" mat-icon-button (click)="deleteTransaction(i,a)">
+              <button class="w-5" type="button" mat-icon-button (click)="deleteTransaction(i,a)">
                   <i ofbicon>delete_forever</i>
               </button> 
             <mat-form-field class="w-15">
@@ -47,7 +47,7 @@
             </mat-form-field>            
           </div>          
         </div>
-        <button class="w-15" mat-stroked-button (click)="addTransaction(i)">Add Transaction</button>
+        <button class="w-15" mat-stroked-button type="button" (click)="addTransaction(i)">Add Transaction</button>
         <div class="ml-1 w-20 d-inline-block">
           {{contributorName(i)}}
         </div>
@@ -62,7 +62,7 @@
         </div>        
       </div>
     </div>
-    <button mat-stroked-button class="m-1 w-15"  (click)="addContributor()">Add Contributor</button>
+    <button mat-stroked-button class="m-1 w-15" type="button"  (click)="addContributor()">Add Contributor</button>
     <div class="ml-1 w-20 d-inline-block">
       Combined
     </div>
@@ -75,4 +75,5 @@
     <div class="w-15 d-inline-block">
       Total: {{combinedTotal(0)}}
     </div>  
+    <button mat-raised-button type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
 </form>

Client/src/app/components/add-transaction-page/add-transaction-page.component.ts

@@ -4,6 +4,7 @@ import { UserService } from 'src/app/services/user.service';
 import { Contribution } from './contribution';
 import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
 import { checkNumberValidator } from './check-number-validator';
+import { contributorValidator } from './contributor-validator';
 
 @Component({
   selector: 'app-add-transaction-page',
@@ -16,8 +17,8 @@ export class AddTransactionPageComponent implements OnInit {
 
   form: FormGroup;
 
-  addTransactionButtonDisabled: boolean = true;
+  submitButtonDisabled: boolean = false;
-  addTransactionButtonText: string = "Submit";
+  submitButtonText: string = "Submit";
   types: {value:number,display:string}[] = [];
   funds: {value:number,display:string}[] = [];
   contributors: {value:number,display:string}[] = [];
@@ -43,8 +44,8 @@ export class AddTransactionPageComponent implements OnInit {
 
     return this.formBuilder.group({
       date: [dte, Validators.required],
-      contributorId: [0, Validators.required],
+      contributorId: [0, [Validators.required, contributorValidator(this)]],
-      transactions: this.formBuilder.array([this.getTransaction(), this.getTransaction()])
+      transactions: this.formBuilder.array([this.getTransaction()])
     });
   }
 
@@ -60,7 +61,6 @@ export class AddTransactionPageComponent implements OnInit {
   }
 
   onContributorChange(event) {
-    console.log(event);
     if (event && event.value) {
       if (event.value === -1) {
         // Open new user dialog
@@ -133,5 +133,22 @@ export class AddTransactionPageComponent implements OnInit {
     return sum;
   }
 
+  onSubmit() {
+    this.submitButtonText = 'Submitting...';
+    this.submitButtonDisabled = true;
+    var data = this.form.value;
+    const transactions: Transaction[] = [];
+    for(let c = 0; c < data.contributions.length; c++) {
+      const contribution = data.contributions[c] as Contribution;
+      for(let t = 0; t < contribution.transactions.length; t++) {
+        const transaction = contribution.transactions[t] as Transaction;
+        transaction.contributorId = (<any>contribution.contributorId).value;
+        transaction.date = contribution.date;
+        transactions.push(transaction);
+      }
+    }
+    console.log(transactions);
+
+  }
 
 }

Client/src/app/components/add-transaction-page/contributor-validator.ts

@@ -0,0 +1,18 @@
+import { ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
+import { AddTransactionPageComponent } from './add-transaction-page.component';
+
+export function contributorValidator(comp: AddTransactionPageComponent): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const val = control.value;
+        const error = {'invalidName':{value: val}};
+        if (!val || !val.value) {
+            return error;
+        }
+        const contributor = comp.contributors.findIndex(c => c.value === val.value);
+        if (contributor >= 0) {
+            return null;
+        }
+        return error;
+        
+    };
+}