角度 4 模板驱动表单错误 - 从" From Theory to practice E-book"练习

Question

我正在按照阿西姆·侯赛因先生书中的说明进行操作，并遇到了控制台错误。作为对自己的挑战，我没有像作者在他的示例中那样使用 plunker，我正在使用角度 cli 来模拟更真实的开发场景，但我遇到了以下错误：

ModelFormComponent.html:2 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
Example:

<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.webpackJsonp.../../../forms/@angular/forms.es5.js.ReactiveErrors.missingFormException (forms.es5.js:4437)

以下是他在 plunker 上的例子的链接：http://plnkr.co/edit/MyHYNKJiB5ruiH1AOauL?p=preview

这是我的组件

model.form.component.ts

import {
NgModule,
Component,
Pipe,
OnInit } from '@angular/core';
import {
ReactiveFormsModule,
FormsModule,
FormGroup,
FormControl,
Validators,
FormBuilder } from '@angular/forms'
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@Component({
selector: 'model-form',
template: `
<!--suppress ALL -->
<form novalidate [formGroup]="myform">
<fieldset formGroupName="name">
<div class="form-group">
<label>First Name</label>
<input type="text"
class="form-control"
formControlName="firstName">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text"
class="form-control"
formControlName="lastName">
</div>
</fieldset>
<div class="form-group">
<label>Email</label>
<input type="email"
class="form-control"
formControlName="email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password"
class="form-control"
formControlName="password">
</div>
<div class="form-group">
<label>Language</label>
<select class="form-control"
formControlName="language">
<option value="">Please select a language</option>
<option *ngFor="let lang of langs"
[value]="lang">{{lang}}
</option>
</select>
</div>
<pre>{{myform.value | json}}</pre>
</form>
`
})
export class ModelFormComponent implements OnInit {
langs: string[] = [
'English',
'French',
'German',
]
myForm: FormGroup;
constructor() { }
ngOnInit() {
this.myForm = new FormGroup({
name: new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required)
}),
email: new FormControl('', [
Validators.required,
Validators.pattern("[^ @]*@[^ @]*")
]),
password: new FormControl('', [
Validators.required,
Validators.minLength(8)
]),
language: new FormControl()
});
}
}

app.component.ts

import { Component } from '@angular/core';
import { ModelFormComponent } from './model-form/model-form.component';

@Component({
selector: 'app-root',
template:`
{{ title }}
<model-form></model-form>
`,
})
export class AppComponent {
title = 'Form Model Driven Exercise';
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule  } from '@angular/forms';
import { AppComponent } from './app.component';
import { ModelFormComponent } from './model-form/model-form.component';
@NgModule({
declarations: [
AppComponent,
ModelFormComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [
AppComponent,
ModelFormComponent]
})
export class AppModule { }

这只是讲座的乞求，我相信还有更多的事情可以让表单正常工作，而表单加载并且应用程序不会完全崩溃，在他的 plunker 中没有错误，所以问题是，为什么我会收到错误？提前谢谢你。

Answer 1

你的代码中有拼写错误。

将myform替换为模板中的myForm。所以应该是

[formGroup]="myForm"

Answer 2

移动

this.myForm = new FormGroup({ ... }}

到构造函数。如果构造函数中尚未提供所有必需的信息或数据，则可以稍后对其进行修改。

ngOnInit()是在 Angular 第一次更新绑定后调用的。第一次会导致错误，因为this.myFormnull或undefined。