Angular2 Forms: Getting "Object" at console as result of input field element.value

Question

Im trying to print content of input field in the form of angular2 but getting object at the console as result (myform type of ControlGroup), here is my code look like, why this happens actually

import { FORM_DIRECTIVES, ControlGroup, AbstractControl, 
FormBuilder, Validators} from 'angular2/common';


@Component({
  selector : 'formbuilder',
  template : `
    <h1> FOrm Using Formbuilder </h1>
    <form  [ngFormModel] = "myform" (ngSubmit) = "onSubmit(myform.value)">
      <lable>Name: </lable>
      <input type = "text" [ngFormControl] = "myform.controls['input1']" />
      <input type = "text" [ngFormControl] = "myform.controls['input2']" />
      <button type = "text">Submit</button>  
    </form>
  `,
  directives : [FORM_DIRECTIVES]
})
export class formbuilder {
  myform : ControlGroup ;
  ac : AbstractControl;
  constructor(fb : FormBuilder) {
    this.myform = fb.group({
      'input1' : ['ABC', Validators.required],
      'input2' : ['DEF', Validators.required]
    }); 
    this.ac = this.myform.controls['ac']
  }

  onSubmit(value : any) : void {
    console.log("submit method called "  + value);
  }
}
bootstrap(formbuilder);

Why do you think myform.value will give you the value of a text field? You're literally asking for the value of the entire form. — Mike Cluck
– Mike Cluck, Commented Feb 23, 2016 at 16:46

Thierry Templier · Accepted Answer · 2016-02-23 16:49:22Z

2

I have just tested your code and myForm.value contains the following:

{input1: "ABC", input2: "DEF"}

This corresponds to the value of all controls you defined.

If you want to input of a particular field you can use this:

this.myform.controls.input1.value;

answered Feb 23, 2016 at 16:49

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

blackHawk Over a year ago

yes, but why it has to happen object written on console

Thierry Templier Over a year ago

If you only put console.log(value);, you will be able to introspect the object in the console and that it only has properties input1 and input2...

Thierry Templier Over a year ago

You can also use console.log(JSON.stringify(value));

blackHawk Over a year ago

You have always been amazing to me!

Collectives™ on Stack Overflow

Angular2 Forms: Getting "Object" at console as result of input field element.value

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related