Angular 4 Template Driven Form Error - 来自《从理论到实践电子书》的练习

Question

我按照 Asim Hussain 先生的书的说明进行操作，运行遇到控制台错误。作为对我自己的挑战，我没有像作者在他的示例中使用的那样使用 plunker，我使用 angular 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 上的例子的 link：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

移动

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

给构造函数。如果不是所有必需的信息或数据在构造函数中尚不可用，您可以在之后修改它。

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

Answer 2

您的代码中有错字。

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

[formGroup]="myForm"

Angular 4 Template Driven Form Error - 来自《从理论到实践电子书》的练习

Angular 4 Template Driven Form Error - Exercise from " From Theory to practice E-book"

angular

angular-forms