File
Implements
Metadata
| selector |
app-acculynk-query-form |
| styleUrls |
./acculynk-query-form.component.css |
| templateUrl |
./acculynk-query-form.component.html |
import { DatePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { LogService } from '../../../providers/services/log.service';
import { IAccuLynkRow } from '../models/acculynkrow';
import { AccuLynkService } from '../providers/acculynk.service';
@Component({
selector: 'app-acculynk-query-form',
templateUrl: './acculynk-query-form.component.html',
styleUrls: ['./acculynk-query-form.component.css']
})
export class AccuLynkFormComponent implements OnInit {
fromDate: FormControl;
toDate: FormControl;
acculynks: IAccuLynkRow[] = [];
constructor(
private service: AccuLynkService,
private logger: LogService,
private datePipe: DatePipe
) {}
ngOnInit() {
console.log('init form');
this.fromDate = new FormControl(new Date());
this.toDate = new FormControl(new Date());
}
didChange() {
console.log(this.fromDate);
}
onRetrieve() {
console.log('i was clicked');
const from = this.datePipe.transform(this.fromDate.value, 'shortDate');
const to = this.datePipe.transform(this.toDate.value, 'shortDate');
// const from = this.selectorFormGroup.controls.fromDate.value;
// const to = this.selectorFormGroup.controls.toDate.value;
console.log(`query microservice, from: ${from} to: ${to}`);
this.service.getAccuLynkData(from, to).subscribe((data: IAccuLynkRow[]) => {
this.acculynks = data;
});
}
}
<section fxFill fxLayout="column" fxLayoutAlign="space-around start">
<h3 class="component-title">AccuLynk Settlement Entries</h3>
<form name="myForm" fxLayout="column">
<mat-form-field>
<mat-label>Select AccuLynk records from:</mat-label>
<input
[formControl]="fromDate"
name="fromDate"
[matDatepicker]="fromDateSelector"
matInput
placeholder="Choose a date"
/>
<mat-datepicker-toggle
matSuffix
[for]="fromDateSelector"
></mat-datepicker-toggle>
<mat-datepicker #fromDateSelector></mat-datepicker>
</mat-form-field>
<mat-form-field>
<mat-label>Select AccuLynk records to:</mat-label>
<input
[formControl]="toDate"
name="toDate"
placeholder="Choose a date"
matInput
[matDatepicker]="toDateSelector"
/>
<mat-datepicker-toggle
matSuffix
[for]="toDateSelector"
></mat-datepicker-toggle>
<mat-datepicker #toDateSelector></mat-datepicker>
</mat-form-field>
<button mat-button class="button action-background-color" (click)="onRetrieve()">Retrieve Data</button>
<div *ngFor="let acculynk of acculynks">
<div>
<span>{{ acculynk.acculynkPaymentId }}</span
><span>{{ acculynk.total }}</span>
</div>
</div>
</form>
</section>
.component-title {
margin-bottom: 15px;
}
Legend
Html element with directive