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;
}
}