CODEWITHSUNDEEP
javascriptangular
Ramesh
Ramesh

Reputation: 5

Angular Form submit getting as object instead of 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>

component:

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

Upvotes: 0

Views: 17783

Answers (4)

shiva shirke
shiva shirke

Reputation: 1

--> 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.

Upvotes: 0

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

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>

Upvotes: 4

hazrat
hazrat

Reputation: 93

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);
}

Upvotes: 0

Abinash Gupta
Abinash Gupta

Reputation: 321

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);
     }

Upvotes: 1

Related Questions