Uncaught (in promise): Error: formGroup expects a FormGroup instance. Please pass one in Angular 4

Question

我无法解决这个问题。代码是从 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它应该调用一个指定的问题。

Answer 1

您是否导入了 FormGroup？

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

Answer 2

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

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 上面的代码写在 Module 文件而不是 Component 文件中。移动代码后问题得到解决。

Answer 3

您的 HTML 似乎正在发生这种情况。 [formGroup]="todo" 可能会在您的表单初始化之前设置。将其设置为 ng-container 和 *ngIf 以等待表单初始化。

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

Uncaught (in promise): Error: formGroup expects a FormGroup instance. Please pass one in Angular 4

Uncaught (in promise): Error: formGroup expects a FormGroup instance. Please pass one in Angular 4

ionic-framework

ionic3

angular

angular4-forms