I am creating basic angular form and onsubmit trying to retrieve the form value, but my case instead of getting value I am getting value as object.

Note: copied the code with some example.

can you please let me know why i am getting object instead of value?

Please find my below code:

html:

<div class="container">
    <h2>  User Data </h2>
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ngModel>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email" ngModel>
      </div>    
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

ponent:

onSubmit(value: any) {
  console.log("Form Value : " + value);
}

I am creating basic angular form and onsubmit trying to retrieve the form value, but my case instead of getting value I am getting value as object.

Note: copied the code with some example.

can you please let me know why i am getting object instead of value?

Please find my below code:

html:

<div class="container">
    <h2>  User Data </h2>
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ngModel>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email" ngModel>
      </div>    
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

ponent:

onSubmit(value: any) {
  console.log("Form Value : " + value);
}

• javascript
• angular

• Can you add the output of console.log? – Marko Taht Commented Mar 13, 2018 at 9:29
• userForm.value is an object. It contains name and email controls in it. you need to check field value individually like value.name and value.email in your onSubmit method – Wasif Khan Commented Mar 13, 2018 at 9:32
• You are getting an object because your form contains keys. Each key has a value and therefore it is returned as an object. – alsami Commented Mar 13, 2018 at 9:32
• angular.io/guide/forms take a look at the summary in the end. – Marko Taht Commented Mar 13, 2018 at 9:33

4 Answers 4

Your userForm.value contains two values which are name and email.

So when you do console.log(userForm.value);, it will return something like this:

{
  name: 'Surjeet',
  email: '[email protected]'
}

To access the particular value you can do:

1. userForm.value.name => It will return 'Surjeet'
2. userForm.value.email => It will return '[email protected]'

So what you can do now:

Two things you can do in your case:

First one: (get the value by its property)

onSubmit(value: any) {
  //get the value by its property
  console.log("Name: " + value.name);
  console.log("Email: " + value.email);
}

Second one: (pass only those value which you need)

//(ngSubmit)="onSubmit(userForm.value.name)"

<div class="container">
    <h2>  User Data </h2>
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value.name)">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ngModel>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email" ngModel>
      </div>    
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

The value has to be an object. The form contains multiple elements , hence has multiple values.

Try this:

     onSubmit(value: any) {
        console.log("Form Value : ",value);
        console.log(value.name);
        console.log(value.email);
     }

Your input field should be something like this:

<input class="form-control" type="text" [(ngModel)]="name" formControlName="name">

and then in submit function get it's value like

onSubmit(post){
   console.log(post.name);
}

--> in HTML file
<div class="container">
    <h2>  User Data </h2>
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value.name,userForm.value.email)">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ngModel>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email" ngModel>
      </div>    
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>


--> in TS file
onSubmit(name:any, email:any) {
        console.log('Name = ' + name);
        console.log('Email = ' + email);
     }


--> By this code you can get specific value in form either by button triggering (should mention required properties to submit and also in receiving method) or by entire form submit.