I integrated a zip code webservice to automatically fill in the fields in a registration form, more specifically this integration here: https://viacep.com.br/exemplo/jquery/
I'm using it in an angular project, when the form
submit occurs, I call a function to handle the submitted data, with the FormGroup
.
The form is exactly that of the integration, so I believe it is not necessary to repeat the code here since it is there in the link. And the initial function in .ts is this:
async onSubmit(formData: FormGroup){
var data: any = new FormData();
data.set('username',formData.value.username);
var dataReceived = data.entries();
var objData = dataReceived.next();
var sendData = {};
while(undefined !== objData.value) {
sendData[objData.value[0]] = objData.value[1];
objData = dataReceived.next();
}
console.log(sendData)
this.editAccount(sendData)
}
I know I could just use the data from formData: FormGroup
directly, but I need to set different information for some fields, so I did it this way. But that is beside the point.
At the end of the function there it sends all the data to another function that updates the DB.
The main problem occurs when the client fills in the zip code field. After filling, jQuery
updates the fields normally, but when the form is called, the information does not arrive in the function, only the value
of the input where the zip code is entered.
They appear on the screen but are not sent. To work I would need to go into each field, delete any letter or insert some more character. It seems that it can't pull the field value without actually typing something into the input
.
The debug is being done through the console.log
there in the code.
Any reason why this happens? I suspect it is something with jquery.
I already tried these solutions here but it didn't work: val() doesn't trigger change() in jQuery