formGroup需要一个FormGroup实例。请通过一个 [英] formGroup expects a FormGroup instance. Please pass one in

问题描述

情况：

我想在我的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

这篇关于formGroup需要一个FormGroup实例。请通过一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！