Submit Button

Transactions
dan 2019-07-05 14:48:28 -06:00
parent 142c41ae8e
commit a81aa76bf0
3 changed files with 46 additions and 10 deletions

View File

@ -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>

View File

@ -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;
addTransactionButtonText: string = "Submit";
submitButtonDisabled: boolean = false;
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],
transactions: this.formBuilder.array([this.getTransaction(), this.getTransaction()])
contributorId: [0, [Validators.required, contributorValidator(this)]],
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);
}
}

View File

@ -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;
};
}