FormControl returning empty value in Angular 2

Question

I am using a form

<form [formGroup]="form">
    <input type="text" value={{userDetails.first_name}} formControlName = "firstName">
    <button type="submit" data-action="save" (click)="onSubmit(form.value)">
</form>

Here userDetails.first_name value is Tom. It is visible on UI inside text box ; but when I submit form form.firstName is giving me empty value.

Answer 1

To get the value you should check form.value.firstName not form.firstName.

To have a better idea of how form is structured, do a console.log(this.form) on form submit.

Answer 2

Declare form group :

private userForm: FormGroup;

Initialize user form like this:

  userForm = form.group({
          firstName:  [firstName, [Validators.required]]
        });

Declare your form in HTML like this:

 <form class="example-form " [formGroup]="userForm"
                  (ngSubmit)="onSubmit(userForm)">
    <input type="text" value={{userDetails.firstName}} formControlName = 
      "firstName">
    <button type="submit" data-action="save"/>
 </form>

Make your onSubmit() method like this:

onSubmit({formValue, valid}: { formValue: UserDetails, valid: boolean }) {
    const firstName= value.firstName;
 }

Answer 3

html

<form [formGroup]="form">
    <input type="text" formControlName="firstName">
    <button type="submit" data-action="save" (click)="onSubmit(form.value)">
</form>

component

you can set value like that

this.form.patchValue({firstName:this.userDetails.first_name});

make sure you create instance of form Group into component