Search code examples
angularobservableangular-forms

Angular form submit only has fields with changes - not the full form values

When i submit my angular form i get values only for changed fields. I should be getting the full form values correct?

 // Profile.html
<form [formGroup]="profileForm" (ngSubmit)="submitProfileForm(profileForm.value)" #myform="ngForm">

 <input type="text" class="form-control" id="firstName" value="{{currentUserMeta.firstName}}" formControlName='firstName'>

 <input type="text" class="form-control" id="lastName" formControlName='lastName'value="{{currentUserMeta.lastName}}">
....
</form>

// Profile.ts
submitProfileForm(value: any) {
    console.log(this.profileForm.get('firstName').value);
    console.log(this.profileForm.get('lastName').value);
    console.log(value);
    this.userService.updateUserProfile(value);
}

When I change only the about input field for example and then press submit I get this in the output. 

{displayName: "", firstName: "", lastName: "", about: "12"}

firstName and lastName had values and they were grabbed from an observable currentUserMeta

It seems to me the form is not aware when these values got updated through angular binding {{ }}.

another example

form initial state (Correct)

enter image description here

after pressing 2 for lastName and 3 for about field and then pressing Submit

enter image description here

As you can see firstName value of 1 is not there in the log. And even trying to print it out through log is not working.

 console.log(this.profileForm.get('firstName').value);

I should add that I get all the values(changed and unchanged) if the form is already loaded and I updated all of the inputs at one time or another. (I dont redirect to another page after submit). Let me know if I have done something wrong.

Solution

  • Your aproach is not 100% fine, it seams that you are using ModelDrivenForm and passing the value which is more like TemplateDrivenForm.

    If you use ModelDrivenForm, like it seams that is what you are using, is fine how you are declaring the form's [formGroup] and the input's formControlName but you shuldn't put the predefined values in value="{{currentUserMeta.lastName}}"

    You shuld set these values in your ts file, using for example this.profileForm.get('lastName').set(this.currentUserMeta.lastName); when you have this data.

    I hope that this helps, more info about ModelDrivenForms are here in the doc https://angular.io/guide/reactive-forms and about template-driven form are here https://angular.io/guide/forms