formGroup需要一个FormGroup实例。请通过一个

formGroup需要一个FormGroup实例。请通过一个

问题描述:

情况:

我想在我的Ionic 2应用程序中创建一个非常简单的登录表单。

I am trying to make a very simple login form in my Ionic 2 app.

无论我尝试什么,我都会收到此错误:

No matter what I try, I keep getting this error:

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>

问题:

您为什么会收到错误?

您知道该代码有什么问题吗?

Do you know what is wrong with that code?

谢谢!

ionViewDidLoad 中的代码添加到构造函数。它可能没有及时分配表单,导致视图使用未定义的

Add the code in the ionViewDidLoad into the constructor. It's probably not assigning the form in time, causing the view to use undefined