Angular2 Forms：在控制台获取“对象”作为输入字段 element.value 的结果答案

【问题标题】：Angular2 Forms: Getting "Object" at console as result of input field element.valueAngular2 Forms：在控制台获取“对象”作为输入字段 element.value 的结果
【发布时间】：2016-06-05 14:53:37
【问题描述】：

我试图以 angular2 的形式打印输入字段的内容，但在控制台上获取对象作为结果（我的 ControlGroup 类型），这是我的代码，为什么会发生这种情况

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

【问题讨论】：

为什么你认为myform.value 会给你一个文本字段的值？您实际上是在询问整个表单的值。

标签： javascript angularjs angular angular2-forms angular2-formbuilder

【解决方案1】：

我刚刚测试了您的代码，myForm.value 包含以下内容：

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

这对应于您定义的所有控件的值。

如果你想输入一个特定的字段，你可以使用这个：

this.myform.controls.input1.value;

【讨论】：

是的，但是为什么它必须发生在控制台上写的对象
如果你只输入console.log(value);，你将能够在控制台中内省对象并且它只有属性input1和input2...
你也可以使用console.log(JSON.stringify(value));
你一直对我很了不起！