角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。