Hello,
I have been struggling to solve this. I hope someone can help me out with this. So basically, I have a form… Inside the form I have 4 fields: Source (radio group of Wallet and Card), Wallet dropdown (appears when you choose Wallet radio button), Card dropdown (appears when you choose Card radio button), and Amount.
This is the TS of my form:
Form builder
this.addExpenseForm = formBuilder.group({
title: ['', Validators.compose([Validators.required, Validators.maxLength(40)])],
category: ['', Validators.required],
source: ['', Validators.required],
wallet: [null, null],
card: [null, null],
amount: [null, null],
date: [this.currentDate, Validators.required],
time: [this.currentTime, Validators.required]
});
//when you choose 'wallet' or 'card' radio button
onSourceChange(event) {
console.log('1. choose source: ' + event);
if(event == 'wallet') {
this.isWallet = true;
this.isCard = false;
this.addExpenseForm.controls['card'].validator = null;
this.addExpenseForm.controls['card'].setErrors(null);
this.addExpenseForm.controls['card'].reset();
this.addExpenseForm.get('wallet').setValidators([Validators.required]);
}
if(event == 'card') {
this.isCard = true;
this.isWallet = false;
this.addExpenseForm.controls['wallet'].validator = null;
this.addExpenseForm.controls['wallet'].setErrors(null);
this.addExpenseForm.controls['wallet'].reset();
this.addExpenseForm.get('card').setValidators([Validators.required]);
}
this.addExpenseForm.controls['amount'].validator = null;
this.addExpenseForm.controls['amount'].setErrors(null);
this.addExpenseForm.controls['amount'].reset();
}
//when you select an option from the dropdown
onSourceSelect(id, source) {
this.addExpenseForm.controls['amount'].validator = null;
this.addExpenseForm.controls['amount'].setErrors(null);
this.addExpenseForm.controls['amount'].reset();
if(source == 'wallet') {
console.log('2.1 wallet chosen: ' + id);
this.getWalletAvailableAmount(id);
}
if(source == 'card') {
console.log('2.2 card chosen: ' + id);
this.getCardAvailableAmount(id);
}
}
getCardAvailableAmount(cardId) {
console.log('3.1 check card amount');
// this.dp.getCardAvailableAmount(cardId)
// .then(data => {
// this.amount = data[0].amountCard;
// this.addExpenseForm.get('amount').setValidators([Validators.required, Validators.min(1), Validators.max(this.amount)]);
// }, err => {
// console.log(err);
// })
}
getWalletAvailableAmount(walletId) {
console.log('3.2 check wallet amount');
// this.dp.getWalletAvailableAmount(walletId)
// .then(data => {
// this.amount = data[0].amountWallet;
// this.addExpenseForm.get('amount').setValidators([Validators.required, Validators.min(1), Validators.max(this.amount)]);
// }, err => {
// console.log(err);
// })
}
Let us say when the page loads for the first time and I choose Wallet radio button the console.log (1.) will print. Then when I choose a wallet in the dropdown, two console.logs will print (2.1 and 3.2). This is the expected behavior. However, lets say I changed my mind and choose Card radio button, the console.log (1., 2.2, and 3.1) will immediately print, which is not the expected behavior. Not sure why this is happening when I am resetting the validators of the fields.
Why is this happening?
Hope someone can help me with this.
Thank you!
