잡히지 않음 (약속 있음) : 오류 : formGroup이 FormGroup 인스턴스를 필요로합니다. Angular 4로 1을 전달하십시오.

Question

이 문제를 해결할 수 없습니다. 코드는 각도 문서에서 복사됩니다.

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) 
     } 
    } 

업데이트 - 코드를 위 한 이 모듈 파일 대신 구성 요소 파일에 기록됩니다. 코드 이동 후 문제가 해결되었습니다.

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>