未捕获（承诺）：错误：formGroup 需要一个 FormGroup 实例。请在 Angular 4 中通过一个答案

【问题标题】：Uncaught (in promise): Error: formGroup expects a FormGroup instance. Please pass one in Angular 4未捕获（承诺）：错误：formGroup 需要一个 FormGroup 实例。请在 Angular 4 中通过一个
【发布时间】：2017-11-06 06:54:35
【问题描述】：

我无法解决这个问题。代码是从 Angular 文档中复制而来的。

TS 文件：

export class FormsPage {
  todo: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.todo = this.formBuilder.group({
      title: ['', [Validators.required, Validators.minLength(5)]],
      description: [''],
    });
    this.todo.valueChanges.subscribe(data=>this.todoOnDataChange(data));
  }
  todoOnDataChange(data: any): void {
     console.log(data);
  }
  logForm(){
    console.log(this.todo.value)
  }
}

HTML 文件

<form [formGroup]="todo" (ngSubmit)="logForm()">
    <ion-item>
      <ion-label>Todo</ion-label>
      <ion-input type="text" formControlName="title"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Description</ion-label>
      <ion-textarea formControlName="description"></ion-textarea>
    </ion-item>
    <button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
  </form>

代码有什么问题？我只需要开发一个表单并在 onSubmit 上调用一个指定的问题。

【问题讨论】：

标签： angular ionic-framework ionic3 angular4-forms

【解决方案1】：

为变量添加了表单控件。请检查以下代码。

export class FormsPage {
      todo: FormGroup;
      title : FormControl;
      description : FormControl;
      constructor(private formBuilder: FormBuilder) {
      this.title = new FormControl("", Validators.compose([Validators.required, Validators.minLength(5)]));
      this.description = new FormControl();
        this.todo = formBuilder.group({
          title: this.title,
          description: this.description
        });
        this.todo.valueChanges.subscribe(data=>this.todoOnDataChange(data));
      }
      todoOnDataChange(data: any): void {
         console.log(data);
      }
      logForm(){
        console.log(this.todo.value)
      }
    }

更新 - 1 上面的代码写在模块文件而不是组件文件上。移动代码后问题得到解决。

【讨论】：

还是同样的问题。
与文件名和行号共享整行异常。示例例外：未捕获（承诺中）：错误：./EditPatientComponent 类 EditPatientComponent 中的错误 - 内联模板：1:10 导致：formGroup 需要一个 FormGroup 实例。
当我把它改成this.title = new FormControl("", Validators.compose([Validators.required]));同样的错误，截图：link
通过修复语法错误编辑了几行并添加了标题和描述的返回类型
this 已从 this.formBuilder 中移除。请也尝试一下，仅在构建该 formbuilder 对象时存在一些小错误。如果它不起作用，我将在示例项目中运行它

【解决方案2】：

您是否导入了 FormGroup？

import { FormControl, FormGroup, Validators } from '@angular/forms';

【讨论】：

import { NgModule, Component } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { RegisterPage } from './register'; import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
我看不到 FormGroup 实例化。你能试试todo: new FormGroup()
Typescript Error '(' expected.

【解决方案3】：

看起来它正在您的 HTML 中发生。 [formGroup]="todo" 可以在表单初始化之前设置。将其设置在 ng-container 和 *ngIf 中以等待表单被初始化。

<ng-container *ngIf="todo">
    <form [formGroup]="todo" (ngSubmit)="logForm()">
    //...
    </form>
</ng-container>

【讨论】：