wbrawner/twigs-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve autocapitalization of form inputs for budgets, transactions, and categories

Browse source
This commit is contained in:
William Brawner 2022-11-08 20:36:05 -07:00
parent 170214c1ca
commit 3981e575f2
4 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/budgets/add-edit-budget/add-edit-budget.component.html
View file

@ -4,10 +4,10 @@
</div> </div>
<div *ngIf="!isLoading && budget" class="form budget-form"> <div *ngIf="!isLoading && budget" class="form budget-form">
<mat-form-field> <mat-form-field>
<input matInput [(ngModel)]="budget.name" placeholder="Name" required> <input matInput [(ngModel)]="budget.name" placeholder="Name" required autocapitalize="words">
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<textarea matInput [(ngModel)]="budget.description" placeholder="Description"></textarea> <textarea matInput [(ngModel)]="budget.description" placeholder="Description" autocapitalize="sentences"></textarea>
</mat-form-field> </mat-form-field>
<button mat-raised-button color="accent" (click)="save()">Save</button> <button mat-raised-button color="accent" (click)="save()">Save</button>
<button class="button-delete" mat-raised-button color="warn" *ngIf="!create" (click)="delete()">Delete</button> <button class="button-delete" mat-raised-button color="warn" *ngIf="!create" (click)="delete()">Delete</button>

6
src/app/categories/category-form/category-form.component.html
View file

@ -3,13 +3,13 @@
</div> </div>
<div *ngIf="currentCategory" class="form category-form"> <div *ngIf="currentCategory" class="form category-form">
<mat-form-field (keyup.enter)="doAction()"> <mat-form-field (keyup.enter)="doAction()">
<input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required> <input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required autocapitalize="words">
</mat-form-field> </mat-form-field>
<mat-form-field (keyup.enter)="doAction()"> <mat-form-field (keyup.enter)="doAction()">
<textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description"></textarea> <textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description" autocapitalize="sentences"></textarea>
</mat-form-field> </mat-form-field>
<mat-form-field (keyup.enter)="doAction()"> <mat-form-field (keyup.enter)="doAction()">
<input matInput type="text" [(ngModel)]="currentCategory.amount" placeholder="Amount" required> <input matInput type="input" [(ngModel)]="currentCategory.amount" placeholder="Amount" required step="0.01">
</mat-form-field> </mat-form-field>
<mat-radio-group [(ngModel)]="currentCategory.expense"> <mat-radio-group [(ngModel)]="currentCategory.expense">
<mat-radio-button [value]="true">Expense</mat-radio-button> <mat-radio-button [value]="true">Expense</mat-radio-button>

6
src/app/transactions/add-edit-transaction/add-edit-transaction.component.html
View file

@ -3,13 +3,13 @@
</div> </div>
<div [hidden]="!currentTransaction" *ngIf="currentTransaction" class="form transaction-form"> <div [hidden]="!currentTransaction" *ngIf="currentTransaction" class="form transaction-form">
<mat-form-field> <mat-form-field>
<input matInput [(ngModel)]="currentTransaction.title" placeholder="Name" required> <input matInput [(ngModel)]="currentTransaction.title" placeholder="Name" required autocapitalize="words">
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<textarea matInput [(ngModel)]="currentTransaction.description" placeholder="Description"></textarea> <textarea matInput [(ngModel)]="currentTransaction.description" placeholder="Description" autocapitalize="sentences"></textarea>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="text" [(ngModel)]="currentTransaction.amount" placeholder="Amount" required> <input matInput type="number" [(ngModel)]="currentTransaction.amount" placeholder="Amount" required step="0.01">
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput type="date" [ngModel]="transactionDate | date:'yyyy-MM-dd'" <input matInput type="date" [ngModel]="transactionDate | date:'yyyy-MM-dd'"

1
src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts
View file

@ -18,7 +18,6 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
@Input() create: boolean @Input() create: boolean
public transactionType = TransactionType; public transactionType = TransactionType;
public categories: Category[]; public categories: Category[];
public rawAmount: string;
public currentTime: string; public currentTime: string;
public transactionDate: string; public transactionDate: string;