情况:
我想在我的Ionic 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>
问题:
你为什么我收到错误?
你知道那段代码有什么问题吗?
谢谢!
答案 0 :(得分:9)
将ionViewDidLoad
中的代码添加到构造函数中。它可能没有及时分配表单,导致视图使用未定义的
答案 1 :(得分:2)
formBuilder的初始化为ngOnInit方法。那必须在构造函数中。
答案 2 :(得分:0)
在构造函数中声明表单构建器
constructor()
{
this.loginForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required],
});
}
这解决了我的问题。