formGroup需要一個FormGroup實例。請把一個在

我試圖做一個非常簡單的登錄表單在我的離子2應用程序。

無論我怎麼努力，我不斷收到此錯誤：

formGroup expects a FormGroup instance. Please pass one in.

的代碼：

的頁面組件：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { FormGroup, Validators, FormBuilder } from '@angular/forms'; 

@Component({ 
    selector: 'login-page', 
    templateUrl: 'login-page.html' 
}) 

export class LoginPage { 

    loginForm: FormGroup; 

    constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {} 

    ionViewDidLoad() 
    { 
     console.log('Login page loaded'); 

     this.loginForm = this.formBuilder.group({ 
      email: ['', Validators.required], 
      password: ['', Validators.required], 
     }); 
    } 

    submitLogin() 
    { 
     console.log('Doing login..'); 
    } 

}

的觀點：

<ion-header> 
    <ion-navbar> 
    <ion-title>LoginPage</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 

    <form [formGroup]="loginForm" (ngSubmit)="submitLogin()"> 

    <ion-item> 
     <ion-label>Email</ion-label> 
     <ion-input #email type="email" formControlName="email"></ion-input> 
    </ion-item> 

    <ion-item> 
     <ion-label>Password</ion-label> 
     <ion-input #password type="text" formControlName="password"></ion-input> 
    </ion-item> 

    <button ion-button block type="submit">Submit</button> 

    </form> 

</ion-content>

問題：

你爲什麼我收到錯誤？

你知道那段代碼有什麼問題嗎？

謝謝！

來源

2016-11-17 johnnyfittizio

嘗試將'ionViewDidLoad'中的代碼添加到構造函數中。這可能不是時間分配的形式，導致視圖使用undefined –

哦，我的天啊，謝謝！就是這樣！你可以把它寫成答案，我可以將其標記爲正確的！ – johnnyfittizio

我在ngOnInit中添加了它，它可以工作。認爲代碼更好的方式。不幸的是，離子不具有稱爲''ionWillLoad''的alifecycle – raj

將ionViewDidLoad中的代碼添加到構造函數中。它可能不會及時分配表單，導致視圖使用未定義

來源

2016-11-17 13:12:39

formGroup需要一個FormGroup實例。請把一個在

回答

相關問題