add filing status

kaiyuan01 · Jun 15, 2024 · 5ead889 · 5ead889
1 parent d853f21
commit 5ead889
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,6 +6,7 @@ <h1>{{ title }}</h1>
 
       <hr> 
 
+      <!-- angular reactive form -->
       <form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="form" >
         <label for="bal" class="label">Pre-Tax Account Balance:</label>
         <input type="text"  id="name" formControlName="bal" />
@@ -23,6 +24,15 @@ <h1>{{ title }}</h1>
         <input type="text" id="age2convert" formControlName="age2convert" />
         <br>
 
+        <br>
+        <label for="statusSelected" class="label">U.S. Tax Filing Status:</label>
+        <select class="custom-select" (change)="changeFilingStatus($event)" formControlName="statusSelected">
+          <option value="">Pick tax filing status</option>
+          <option *ngFor="let status of filingStatuses" [ngValue]="status">{{status}}</option>
+        </select>
+        <br>
+        <br>
+
         <label for="income" class="label">收入:</label>
         <input type="text"  id="income" formControlName="income" />
         <br>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,6 +15,8 @@ import Utils from './app.utils';
 import { MyCurrencyPipe } from './pipes/currency.pipe'
 import { formatDate, CurrencyPipe } from '@angular/common';
 import { environment } from './../environments/environment';
+//import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule} from '@angular/common';
 
 export interface ColData {
   year: number;
@@ -41,7 +43,7 @@ export interface ColDataSummary {
 }
 
 let ELEMENT_DATA: ColData[] = [
-  {year: 2024, age: 7, bal: 20.1797, income: 23000, ded: 0,
+  {year: 2024, age: 50, bal: 900000, income: 23000, ded: 29200,
     conversion: 0,
     taxableIncome: 0,
     rmdFactor: 0,
@@ -60,7 +62,9 @@ let ELEMENT_DATA_SUMMARY: ColDataSummary[] = [
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatTableModule],
+  imports: [RouterOutlet, FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatTableModule, 
+    //BrowserModule, 
+    CommonModule ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   providers:[TableDataService]
@@ -72,6 +76,9 @@ export class AppComponent implements OnInit  {
  // @Input() data: [] | null = [];
  @HostBinding('attr.app-version') appVersionAttr = environment.appVersion;
 
+  // status 
+  filingStatuses: any = [ 'Single', 'Married Filing Jointly', ];
+
   dataSummary: ColDataSummary[] = ELEMENT_DATA_SUMMARY;
   newSummary: ColDataSummary = {info: '', at85: '', at100: '', at120: '',};
   constructor(private myService: TableDataService) {
@@ -112,6 +119,7 @@ export class AppComponent implements OnInit  {
     this.myForm = new FormGroup({
       bal: new FormControl(this.INIT_BAL, Validators.required),
       return: new FormControl(this.INIT_RET, [Validators.required]),
+      statusSelected: new FormControl('Married Filing Jointly', [Validators.required]),
       age: new FormControl('', Validators.required),
       age2convert: new FormControl('62', Validators.required),
 
@@ -124,12 +132,31 @@ export class AppComponent implements OnInit  {
     });
   }
 
+  changeFilingStatus(e: any) {
+    console.log('status selected: ', e.value);
+    this.myForm.setValue(e.target.value, {
+      onlySelf: true
+    })
+  }
+
+  // Getter method to access formcontrols
+  get filingStatus() {
+    return this.myForm.get('statusSelected');
+  }
+
   onSubmit() {
     console.log(this.myForm.value);
     if(this.myForm && this.myForm.get('taxBracket') && this.myForm.get('taxBracket')?.value >= "22%") {
       if(this.myForm.get('taxBracket')?.value == "22%") this.myForm.get("taxableIncome")?.setValue( '201050' );
       else if (this.myForm.get('taxBracket')?.value == "24%") this.myForm.get("taxableIncome")?.setValue( '383900' );
 
+      if(this.myForm.get('statusSelected')?.value == "Single") { // default MFJ
+        console.log( 'Processing status: Single ...' );
+        if(this.myForm.get('taxBracket')?.value == "22%") this.myForm.get("taxableIncome")?.setValue( '2500' );
+        else if (this.myForm.get('taxBracket')?.value == "24%") this.myForm.get("taxableIncome")?.setValue( '3500' );
+
+      }
+
       console.log( 'taxableIncome: ', this.myForm.get('taxableIncome')?.value );
       console.log( 'income: ', parseInt(this.myForm.get("income")?.value.replace(/,/g, ''), 10) );