Chore: Moved from Untyped to Stongly Typed forms.
This commit is contained in:
@ -1,12 +1,12 @@
|
||||
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
|
||||
import { FormControl, FormGroup } from '@angular/forms';
|
||||
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import * as moment from 'moment';
|
||||
import { Observable, of as observableOf } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
|
||||
import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
|
||||
|
||||
import { Account } from '../core/account';
|
||||
import { AccountService } from '../core/account.service';
|
||||
@ -27,7 +27,12 @@ export class LedgerComponent implements OnInit, AfterViewInit {
|
||||
@ViewChild(MatSort, { static: true }) sort?: MatSort;
|
||||
info: Ledger = new Ledger();
|
||||
dataSource: LedgerDataSource = new LedgerDataSource(this.info.body);
|
||||
form: UntypedFormGroup;
|
||||
form: FormGroup<{
|
||||
startDate: FormControl<Date>;
|
||||
finishDate: FormControl<Date>;
|
||||
account: FormControl<Account | string | null>;
|
||||
}>;
|
||||
|
||||
selectedRowId = '';
|
||||
debit = 0;
|
||||
credit = 0;
|
||||
@ -40,19 +45,18 @@ export class LedgerComponent implements OnInit, AfterViewInit {
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private fb: UntypedFormBuilder,
|
||||
private toCsv: ToCsvService,
|
||||
private ser: LedgerService,
|
||||
private accountSer: AccountService,
|
||||
) {
|
||||
this.form = this.fb.group({
|
||||
startDate: '',
|
||||
finishDate: '',
|
||||
account: '',
|
||||
this.form = new FormGroup({
|
||||
startDate: new FormControl(new Date(), { nonNullable: true }),
|
||||
finishDate: new FormControl(new Date(), { nonNullable: true }),
|
||||
account: new FormControl<Account | string | null>(null),
|
||||
});
|
||||
|
||||
this.accounts = (this.form.get('account') as UntypedFormControl).valueChanges.pipe(
|
||||
startWith(null),
|
||||
this.accounts = this.form.controls.account.valueChanges.pipe(
|
||||
map((x) => (x instanceof Account ? x.name : x)),
|
||||
map((x) => (x !== null && x.length >= 1 ? x : null)),
|
||||
debounceTime(150),
|
||||
distinctUntilChanged(),
|
||||
@ -127,7 +131,7 @@ export class LedgerComponent implements OnInit, AfterViewInit {
|
||||
const formModel = this.form.value;
|
||||
|
||||
return new Ledger({
|
||||
account: formModel.account,
|
||||
account: formModel.account as Account,
|
||||
startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
|
||||
finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user