为什么我无法从 NgForm 获取表单控制

Question

我有简单的形式

\n\n

<form novalidate #f="ngForm">\n  <mat-form-field class="example-full-width">\n    <input matInput placeholder="Favorite food" name="myname" required [(ngModel)]="comment">\n    <mat-error>Is required lol</mat-error>\n  </mat-form-field>\n\n  <mat-form-field class="example-full-width">\n    <input matInput placeholder="Favorite food" required name="some">\n  </mat-form-field>\n</form>\n

\n\n

和组件作为

\n\n

export class InputOverviewExample {\n  comment = null;\n  @ViewChild(\'f\')\n  form: NgForm\n\n\n  ngOnInit() {\n    console.log(this.form.controls);\n    console.log(Object.keys(this.form.controls));\n\n    console.log(this.form.controls.myname);\n    console.log(this.form.controls[\'myname\']);\n  }\n}\n

\n\n

问题是，控制台输出是：

\n\n

{}\n\xe2\x80\x8b\n    myname: Object { pristine: true, touched: false, status: "INVALID", \xe2\x80\xa6 }\n        Array []\n        undefined\n

\n\n

那么为什么我无法按名称访问表单控件，为什么Object.keys在控制台说有一些键时返回空数组form.controls??\n这是一个游乐场，所以请忽略重复的表单输入等。\n https://stackblitz.com/edit/角乌尔克尔

\n

Answer 1

你错过了 onInit 实现，

首先添加InputOverviewExample implements OnInit正确实现和使用该ngOnInit功能。

其次，由于反应式表单是同步的，因此console.log在表单获取之前initialized和form control添加之前运行。

另外，表单控件的一般实现form builder使用in 构造函数，因为您还没有采用它，所以您已经遇到过这个问题，所以下面的代码将为您解决它

import { Component, ViewChild, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

/**
 * @title Basic Inputs
 */
@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample implements OnInit {
  comment = null;
  @ViewChild('f')
  form: NgForm


  ngOnInit() {
    setTimeout(() => {
      console.log(this.form.controls);
    console.log(typeof this.form.controls);
    console.log(Object.keys(this.form.controls));

    console.log(this.form.controls.myname);
    console.log(this.form.controls['myname']);
    })

  }
}

这是工作代码的DEMO

附：

对于你的问题那么模板驱动的表单可以在后台的反应式表单 API 上工作吗？，答案是肯定的

解释如下：

NgModel 指令创建 FormControl 实例来管理模板表单控件，并且 name 属性告诉 NgModel 指令将该 FormControl 存储在父 FormGroup 中的键下

<input name="foo" ngModel>

相当于：

let model = new FormGroup({
  "foo": new FormControl()
});

您面临的主要问题是控制台行为，

Console首先执行，然后将值分配给它，因此在控制台执行后分配值时将无法访问任何方法。

这是@yurzui 给出的一个很好的例子