未知（約束）：エラー：formGroupはFormGroupインスタンスを要求します。 Angular 4に1を渡してください。

Question

この問題は解決できません。コードはAngular docsからコピーされます。

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

変数のFormcontrolが追加されました。下記のコードで確認してください。

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 は、モジュールファイルの代わりに、コンポーネント・ファイルに書き込まれます。コードを移動した後で問題が解決しました。

Answer 2

FormGroupをインポートしましたか？

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

Answer 3

あなたのHTMLで起きているようです。フォームが初期化される前に[formGroup]="todo"が設定されている可能性があります。 *ngIfでng-containerに設定し、フォームの初期化を待ちます。

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