I am relatively new to working with Angular and Firebase, and I have encountered an issue with resetting my form after a successful registration process. In my "Register.component.ts" file, I have a method called registration() which is triggered when the user clicks on the submit button.
The problem I am facing is that although the data is successfully saved in Firebase, the form fields are not being reset or cleared. If I attempt to interact with any of the form fields immediately after submitting, all the input fields reset. How can I effectively reset the form once the data has been saved to the real-time Firebase database?
I have noticed that if I move the this.buildForm() function outside of the .then() block, the form resets properly. However, when I place it inside the .then() block, the form does not reset even though I am able to log the return value. I also attempted using asynchronous functions with async/await, encountering the same issue. Inside the try block, if I execute this.buildForm() before this.auth.register(formData), it works as expected; but if I run it afterwards, it does not work.
Upon logging values for this both inside and outside of the .then() block, I found that the values remain consistent. Below are snippets from the code relevant to the component, service, and HTML files:
Register.component.ts
// Import statements and component declaration here
// Code for RegisterComponent class including methods like buildForm(), register(), and cancel()
Register.component.html
<!-- HTML template for the registration form -->
auth.service.ts
// Import statements and AuthService class definition here
// Methods for registering user and adding user to the database