我想验证总预算和总金额。如果Total amount大于toatlbudget amount，表单将重置为angular ionic。
你可以在这里看到这种形式：

下面是我的.ts代码：

import { Component, OnInit, } from '@angular/core';
import { ApiService } from 'src/app/services/api.service';
import { AuthService } from 'src/app/services/auth.service';
import { NgToastService } from 'ng-angular-popup';
import { AlertController } from '@ionic/angular';
import { Router } from '@angular/router';
import { ModalController } from '@ionic/angular';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { StorageService } from 'src/app/services/storage.service';
import { AttachmentsformComponent } from 'src/app/modal/attachmentsform/attachmentsform.component';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-newhireform',
  templateUrl: './newhireform.component.html',
  styleUrls: ['./newhireform.component.scss'],
})

export class NewhireformComponent implements OnInit {
  myForm!: FormGroup;
  formSubmitted: boolean = false;
  departmentDropdown: any[] = [];
  categoryDropdown: any[] = [];
  itemDropdown: any[] = [];
  costCenterdropdown: any[] = [];
  procurementData: any = [];
  userProfile: any = [];
  uploadedFiles: File[] = []; //for file upload from modal
  uploadedFilesCount: number = 0;
  nametooltipText: string = 'Enter user details';
  quantitytooltipText: string = 'Default quantity per item is 1';
  amounttooltipText: string = 'Amount is calculated from Master DataBase'
  //new 
  subTotal: number = 0;

  constructor(
    private apiService: ApiService,
    private authService: AuthService,
    private toast: NgToastService,
    private formBuilder: FormBuilder,
    private router: Router,
    private alertController: AlertController,
    private storageService: StorageService,
    private modalController: ModalController,
    private loadingCtrl: LoadingController,

  ) { }

  ngOnInit(): void {
    let userData = this.storageService.getUserData() || null;
    if (userData == null || userData == undefined) {
      this.router.navigateByUrl('/login');
    }

    // Form Builder
    this.myForm = this.formBuilder.group({
      requestType: 'New Hire',
      requestby: ['', Validators.required],
      department: ['', Validators.required],
      isExpenditure: ['No'], // Initialize with a default value
      totalBudget: [''], // Add Validators.required initially
      utilizedBudget: [''],
      purpose: [''],
      rows: this.formBuilder.array([]),
    });
    this.addRow();

    this.apiService.getDepartmentDropdownData().subscribe((res: any) => {
      this.departmentDropdown = res;
    });

    this.apiService.getCategoryDropdownData().subscribe((res: any) => {
      this.categoryDropdown = res;
    }
    );

    this.apiService.getItemDropdownData().subscribe((res: any) => {
      this.itemDropdown = res;
    }
    );

    this.apiService.getCostCenterDropdownData().subscribe((res: any) => {
      this.costCenterdropdown = res;
    }
    );

    this.authService.getUserprofile().subscribe((res: any) => {
      this.userProfile = res;
      this.myForm.patchValue({
        requestby: this.userProfile.name,
        department: this.userProfile.OrgDepartmentId.Name,
      });
    });

  }//end of ngOnInit

  get rows() {
    return this.myForm.get('rows') as FormArray;
  }

  addRow() {
    const newRow = this.formBuilder.group({
      name: ['', Validators.required],
      category: ['', Validators.required],
      item: ['', Validators.required],
      costCenter: ['', Validators.required],
      unitPrice: ['0', Validators.required],
      quantity: ['1', Validators.required],
    });
    this.rows.push(newRow);
  }

  deleteRow(index: number) {
    if (this.rows.length == 1) {
      this.toast.error({
        detail: 'Atleast one row is required',
        position: 'bottom-right',
        duration: 3000,
        type: 'danger'
      })
    } else {
      this.rows.removeAt(index);
    }
  }

  async checkUtilizedBudgetValidation() {
    const totalBudget = this.myForm.get('totalBudget')?.value;
    let utilizedBudget = this.myForm.get('utilizedBudget')?.value;
    if (utilizedBudget > totalBudget) {
      utilizedBudget = null; // reset null value
      this.myForm.get('utilizedBudget')?.patchValue(utilizedBudget);

      this.toast.info({
        detail: 'Utilized Budget Should Not Greater Then Total Budget',
        position: 'bottom-right',
        duration: 3000,
        type: 'info'
      })
    }
  }

  calculateTotal(): number {
    const rowsArray = this.myForm.get('rows') as FormArray;
    let total = 0;
    rowsArray.controls.forEach(row => {
      const quantity = row.get('quantity')?.value;
      const unitPrice = row.get('unitPrice')?.value;
      const rowTotal = quantity * unitPrice;
      total += rowTotal;
      this.subTotal = total;
    });
    return total;
  }

  get total(): number {
    return this.calculateTotal();
  }

  // for item dropdown to populate unit price
  async checkTotalBudgetToPupulateAmount(event: any, index: number) {
    const isExpenditure = this.myForm.get('isExpenditure')?.value; // get isExpenditure value
    console.log('isExpenditure', isExpenditure);

    if (isExpenditure == 'Yes') {
      const totalBudget = this.myForm.get('totalBudget')?.value;
      const selectedItem = event.target.value;
      const selectedOption = this.itemDropdown.find(option => option.ItemName === selectedItem);
      //new 
      const rowsArray = this.myForm.get('rows') as FormArray;
      console.log('row', rowsArray);
      let total = 0;
      rowsArray.controls.forEach(row => {
        const quantity = row.get('quantity')?.value;
        const unitPrice = row.get('unitPrice')?.value;
        console.log('total', unitPrice);
        const rowTotal = quantity * unitPrice;
        total += rowTotal;
      });

      if (totalBudget < total) {
        this.rows.at(index).get('item')?.patchValue('');
        const unitPrice = this.rows.at(index).get('unitPrice');
        unitPrice?.patchValue(0);
        this.toast.info({
          detail: 'Total Amount Should greater then Total Budget',
          position: 'bottom-right',
          duration: 3000,
          type: 'info'
        })
      }
      else {
        const unitPrice = this.rows.at(index).get('unitPrice');
        unitPrice?.patchValue(selectedOption.UnitPrice);
      }
    }
    else if (isExpenditure == 'No') {
      const totalBudget = this.myForm.get('totalBudget')?.value;
      const selectedItem = event.target.value;
      const selectedOption = this.itemDropdown.find(option => option.ItemName === selectedItem);
      const unitPrice = selectedOption.UnitPrice;
      const rowsArray = this.myForm.get('rows') as FormArray;
      const row = rowsArray.controls[index];
      row.get('unitPrice')?.patchValue(unitPrice);
      console.log('unitPrice', unitPrice);
    }
  }

  // File Upload Modal
  async openModal() {
    const modal = await this.modalController.create({
      component: AttachmentsformComponent,
      componentProps: {
        attachments: this.uploadedFiles,
        attachmentsCount: this.uploadedFilesCount
      }
    });
    await modal.present();
  }

  async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Confirm Submission',
      message: 'Are you sure you want to submit the request?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirmation canceled');
          }
        },
        {
          text: 'Submit',
          handler: () => {
            console.log('Submitting the form...');
            this.submitForm();
          }
        }
      ]
    });
    await alert.present();
  }

  async showSpinner(message: string) {
    const loading = await this.loadingCtrl.create({
      message: message,
      spinner: 'circles', // Choose a spinner style
    });
    await loading.present();
    return loading;
  }

  async hideSpinner(loading: HTMLIonLoadingElement) {
    await loading.dismiss();
  }

  async submitForm() {
    this.formSubmitted = true;
    if (this.myForm.valid) {
      const formattedData = {
        RequestType: this.myForm.value.requestType,
        RequestBy: this.myForm.value.requestby,
        Department: this.myForm.value.department,
        IsExpenditure: this.myForm.value.isExpenditure,
        TotalBudget: this.myForm.value.totalBudget,
        UtilizedBudget: this.myForm.value.utilizedBudget,
        Remarks: this.myForm.value.purpose,
        TotalAmount: this.total,
        CurrentLevel: 1,
        //Inline items
        inlineitem: this.myForm.value.rows.map((row: any) => ({
          name: row.name,
          category: row.category,
          item: row.item,
          costcenter: row.costCenter,
          quantity: row.quantity,
          unitprice: row.unitPrice,
          totalprice: row.quantity * row.unitPrice
        })),
      };
      const loading = await this.showSpinner('Submitting Your Request...'); // Show spinner
      this.apiService.createProcurement(formattedData).subscribe((res: any) => {
        if (res) {
          const formData = new FormData();
          formData.append('procurement_id', res.id);
          for (let i = 0; i < this.uploadedFiles.length; i++) {
            formData.append('attachment', this.uploadedFiles[i]);
          }
          this.apiService.createMoreAttachment(formData).subscribe((res: any) => {
            if (res) {
              this.toast.success({
                detail: 'Your request has been sucessfully submitted!!',
                position: 'bottom-right',
                duration: 3000,
                type: 'success'
              });
              this.hideSpinner(loading); // Hide spinner
              this.router.navigate(['/procurementview'], { queryParams: { id: res.procurement_id } },);
            }
          },
            (err: any) => {
              this.toast.error({
                detail: 'OOPS! Something went wrong',
                position: 'bottom-right',
                duration: 3000,
                type: 'danger'
              })
            }
          );
          this.hideSpinner(loading); // Hide spinner
        }
      });
    } else {
      this.toast.error({
        detail: 'Please fill all the required fields',
        position: 'bottom-right',
        duration: 3000,
        type: 'danger'
      })
    }
  } //end of submitForm
}

如何验证总金额与总预算？我已经尝试过，但如果我选择新的lineitem然后信息消息显示。