0

Am trying to reset my reactive form after submitting to the server with this.form.reset() but i noticed one of the form control(account_name) which was updated with

this.chaseform.patchValue({
          account_name: data.data.accountname,
        }); 

doesnt get resetted.Why and how do i reset it.

Have checked out this solution and other solution on stackoverflow but its not helpfull

chaseform: FormGroup = new FormGroup({
    fromAcct: new FormControl(null, [Validators.required]),
    toAcct: new FormControl(null, [Validators.required]),
    account_name: new FormControl(null),
    amount: new FormControl(null, Validators.required),
    narration: new FormControl(null, Validators.required),
  });

Edit: The entire class code

import { Component, OnInit } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { Account, bankTransfer } from "src/app/interfaces/account";
import { AccountService } from "src/app/services/account/account.service";
import { NotificationService } from "src/app/services/notification.service";
import { Helper } from "src/app/shared/services/helper";

@Component({
  selector: "app-send-fund",
  templateUrl: "./send-fund.component.html",
  styleUrls: ["./send-fund.component.scss"],
})
export class SendFundComponent implements OnInit {
  accounts: Account[] = [];
  beneficiary = [];

  destination_accName = "";
  loadingAccountName = false;
  ownForm: FormGroup = new FormGroup({
    from_account: new FormControl(null, [Validators.required]),
    to_account: new FormControl(null, [Validators.required]),
    amount: new FormControl(null, Validators.required),
    narration: new FormControl(null, Validators.required),
  });
  chaseForm: FormGroup = new FormGroup({
    fromAcct: new FormControl(null, [Validators.required]),
    toAcct: new FormControl(null, [Validators.required]),
    accName: new FormControl(null, [Validators.required]),
    amount: new FormControl(null, Validators.required),
    narration: new FormControl(null, Validators.required),
    save_beneficiary: new FormControl(null, [Validators.required]),
    beneficiary: new FormControl(null),
  });
  otherBankForm: FormGroup = new FormGroup({
    from_account: new FormControl(null, [Validators.required]),
    to_account: new FormControl(null, [Validators.required]),
    bank: new FormControl(null, [Validators.required]),
    accName: new FormControl(null),
    amount: new FormControl(null, Validators.required),
    narration: new FormControl(null, Validators.required),
  });
  showSelectBenificiary: boolean = false;
  beneficiarySelected: boolean = false;
  constructor(
    private accountService: AccountService,
    private helper: Helper,
    private toastService: NotificationService,
    private modalService: NgbModal
  ) {}

  ngOnInit() {
    this.getAccounts();
    this.getBenefiariies();
  }

  getAccounts() {
    this.accountService.getAccounts().subscribe(
      (data) => {
        this.accounts = data.data["account"];
        console.log(this.accounts);
      },
      (error) => {
        console.log("Error getting accounts");
        console.log(error);
      }
    );
  }


  getAccountDetails(account_no) {
    this.accountService.getAccountDetails(account_no).subscribe(
      (data) => {
        console.log(data);
        this.destination_accName = data.data.accountdesc;
        this.chaseForm.patchValue({
          accName: data.data.accountdesc,
        });
      },
      (error) => {
        console.log("Error getting account name");
      }
    );
  }

  _onSubmitchaseForm() {
    if (this.chaseForm.value.save_beneficiary) {
      this.chaseForm.value.save_beneficiary = "1";
    } else {
      this.chaseForm.value.save_beneficiary = "0";
    }
    console.log(this.chaseForm.value);
    this.helper.startSpinner();
    let bankData: bankTransfer = {
      fromAcct: this.chaseForm.value.fromAcct,
      toAcct: this.chaseForm.value.toAcct,
      amount: this.chaseForm.value.amount,
      narration: this.chaseForm.value.narration,
    };
    this.accountService.bankTransfer(bankData).subscribe(
      async (res) => {
        this.helper.hideSpinner();
        if (res.status) {
          this.toastService.successMessage("Transaction Successfull");
          this.chaseForm.reset();
        } else {
        }
      },
      (err) => {
        this.helper.hideSpinner();
        this.toastService.errorMessage("Transaction Failed");
      }
    );
  }

  onChange(event) {
    console.log(this.chaseForm.value);

    let account_no = this.chaseForm.value.toAcct + "";

    if (account_no.toString().length === 10) {
      this.loadingAccountName = true;
      this.getAccountDetails(account_no);
    } else {
      this.loadingAccountName = false;
    }
  }

  getBenefiariies() {
    this.accountService.getBeneficiaries().subscribe(
      (data) => {

        console.log(data);
        this.beneficiary = data.data;
      },
      (error) => {

        console.log(error);
      }
    );
  }

  onSelectBenefiary() {
    this.showSelectBenificiary = !this.showSelectBenificiary;
    this.chaseForm.patchValue({
      toAcct: "",
      accName: "",
    });
  }

  onChangeBeneficiary(event) {
    let account = this.beneficiary.find(
      (el) => el.account == this.chaseForm.value.beneficiary
    );
    console.log(account);

    this.chaseForm.patchValue({
      toAcct: account.account,
      accName: account.name,
    });
    this.showSelectBenificiary = false;
    this.beneficiarySelected = true;
  }
}
walexy
  • 609
  • 2
  • 7
  • 16

0 Answers0