Hi expert,
I cannot find the example - source codes on Syncfusion so I am wondering if it is possible to toggle by displaying "Error" or "Success" (toast) by clicking "Submit button".
Let's say if I have form validator and try to click Submit, it will display error messages (Toast). If all values are not empty, it will show success.
However for my case, it shows two toast like Error then Success. I am wondering if I can only show success instead of error? I try to hide error toast but it will hide 1 second then success toast appear. I don't like it. Any advice?
What am I missing?
public toastObj: ToastComponent; --> it should show either success or error
public toasts: { [key: string]: Object }[] = [
{ cssClass: 'e-toast-success', icon: 'e-success toast-icons', title: 'Success', content: 'Success.' }
{ cssClass: 'e-toast-danger', icon: 'e-error toast-icons', title: 'Error', content: 'Error.' }
];
// if all values are clear, it will show success message
private handleOnSubmit = (values: VeMaContract) => {
document.getElementById("hideToast").style.display = 'none'; // hide error toast but not working
this.toastObj.show(this.toasts[0]);
this.props.saveContract(values); // save contract
};
// this is submit button --> it will always display error toast
private handleOnValidation = () => {
this.toastObj.show(this.toasts[0]);
};
private onclose(e: ToastCloseArgs): void {
const btnEleHide: HTMLElement = document.getElementById('hideToast');
(e.toastContainer.childElementCount === 0) ? btnEleHide.style.display = 'none' : btnEleHide.style.display = 'inline-block';
};
private onbeforeOpen(): void {
const btnEleHide: HTMLElement = document.getElementById('hideToast');
btnEleHide.style.display = 'inline-block';
};
