During my work on a project involving reactive forms, I encountered an issue with form submission. I had implemented a 'Submit' button that should submit the form upon clicking. Additionally, there was an anchor tag that, when clicked, added new fields to the form. Surprisingly, when I only filled out the existing fields without adding any new ones and clicked 'Submit', the data would get submitted successfully (confirmed via console.log()). However, if I did add new fields, fill them in, and then clicked 'Submit', only the data from the original fields would be submitted, leaving out the new data.
You can view a representation of this issue on StackBlitz here.
This snippet shows the HTML code:
<form name="productForm" autocomplete="off" [formGroup]="productForm">
<!-- HTML code here -->
</form>The TypeScript code is as follows:
// TypeScript code here...In the code section below, you can see the onSubmit() function I am using:
onSubmit() {
// Code inside onSubmit() function...
}Despite utilizing the this.productForm.valid function to verify that all form fields are filled, an alert is triggered even when the fields are indeed completed. This behavior prompted me to explore why the data submission process was not functioning correctly.