CODEWITHSUNDEEP
angular
Gurveer
Gurveer

Reputation: 127

Angular form not sending updated values

I am new to angular and trying to send values through form submit, form works fine and sends updated values if I make changes using typing-in text-boxes but if if try to change values using java-script it does not detect the updated values. Please help

<form  #mapFrm = "ngForm" (ngSubmit) = "onClickSubmit(mapFrm)" >
 <input type="text" class="form-control" ngModel    name="lat" required />
</form>

Example: https://stackblitz.com/edit/angular-1ehuzw

Upvotes: 0

Views: 1631

Answers (3)

Ali Wahab
Ali Wahab

Reputation: 592

Agree with Lalit. You are actually changing DOM element. No matter how much changes you make in DOM. You cant get your desired values. Unless you don't make a change in your angular reactive form.

A possible work around would be calling your changeValueByJs() in the app.component.ts 

changeValueByJs(){
 this.yourLatValue = "My Updated value from JS";
}

You can achieve it by using above function and you are changing it using JavaScript as well.

Upvotes: 0

LALIT KANTA DIBYADARSHAN
LALIT KANTA DIBYADARSHAN

Reputation: 753

When you change the value using javascript, actually you are manipulating the DOM element. Which has no effect on angular value i.e yourLatValue. Since the submit method is the part of angular, so it is not working.

Ideally, you should not manipulate anything in angular from outside.

Upvotes: 0

Narm
Narm

Reputation: 10864

From the HTML code you've provided it looks like you're using Template-driven forms

With template driven forms, two-way data binding is the recommended way to set the value in the form.

<form  #mapFrm="ngForm" (ngSubmit)="onClickSubmit(mapFrm)" >
 <input type="text" class="form-control" [(ngModel)]="yourLatValue" name="lat" required />
</form>

Where yourLatValue is a public property of the component that contains the form.

I've created this StackBlitz Demo with a working example of your code so you can play with it.

Upvotes: 3

Related Questions