角4模板驱动表单错误 - 从“从理论到练习电子书”的练习

Question

我遵循Asim Hussain先生的指示，并遇到控制台错误。至于我没有使用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() 
    }); 
    } 

} 

AP p.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 { } 

这是演讲的只是乞讨，我敢肯定有更多的获取形式正常工作，而形式加载和应用程序不会完全崩溃，在他的闯入者没有错误，所以问题是，为什么我得到一个错误？先进的谢谢你。

Answer 1

您的代码中存在拼写错误。

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

[formGroup]="myForm" 

Answer 2

移动

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

的构造。如果并非所有必需的信息或数据在构造函数中都不可用，则可以在之后对其进行修改。

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