0

我已经使用 ionic 3 创建了一个应用程序，然后单击登录链接我收到此错误“找不到使用 fname、电子邮件、号码、gstNumber 的控件，我尝试使用 formGroupName 而不是 formControlName 但仍然无法正常工作请帮我弄清楚我做错了什么，我已经包含登录页面和createAccount？`

import { Component }              from '@angular/core';
import { NavController }          from 'ionic-angular';
import { CreateAccountPage }      from '../create-account/create-account';
import { LoginPage }              from '../login/login';

@Component({
	selector    : 'page-home',
	templateUrl : 'home.html'
})
export class HomePage {

	constructor(public navCtrl : NavController) {

	}
	openLoginPage() {
		this.navCtrl.setRoot(LoginPage);
	}
	openCreateAccount(){
		this.navCtrl.setRoot(CreateAccountPage);
	}
}
<ion-content class="masters" >
	<ion-card>
		<img src="assets/imgs/riseBgdd.jpg" height="550px">
		<button class="card-button button-color-yell" color="light" outline small ion-button style="left:90px"  (click)="openLoginPage()" >
			Login
		</button>
		<button class="card-button1 button-color-blue" color="light" outline small ion-button style="left:150px" (click)="openCreateAccount()" >
			Create Account
		</button>
	</ion-card>
</ion-content>




//This is our Creat account page
<!DOCTYPE html>
<ion-content>
	<h3 text-center>
		Create Account
	</h3>
<form [formGroup]="createAccountForm" >
  <ion-list>
    <ion-item class="round-inp centerIt">
      <ion-input formControlName="firmName" type="text" placeholder="Firm name" >
      </ion-input>
    </ion-item>
    <br>
    <ion-item class="round-inp centerIt">
      <ion-input formControlName="yourName" type="text" placeholder="Your name"  [(ngModel)]="yourName">
      </ion-input>
    </ion-item>
    <br>
    <ion-item class="round-inp centerIt">
      <ion-input formControlName="email" type="email" placeholder="Email"  [(ngModel)]="email">
      </ion-input>
    </ion-item>
    <br>
    <ion-item class="round-inp centerIt">
      <ion-input formControlName="mobileNumber" type="number" placeholder="Mobile number" [(ngModel]="mobileNumber">
      </ion-input>
    </ion-item>
    <br>
    <ion-item class="round-inp centerIt">
      <ion-input formControlName="gstNumber" type="number" placeholder="GST number" [(ngModel)]="firmName">
      </ion-input>
    </ion-item>
  </ion-list>
</form>
</ion-content>

<!DOCTYPE html>
<ion-content class="masters">
	<br>
	<div class="centerIt">
		<ion-img src="assets/imgs/icon image.jpg" 
			width="60" height="60" 
			class="app-icon">
		</ion-img>
	</div>

//This is our login  page
	<form [formGroup]="loginForm" (submit)="loginUser($event)">
  <ion-list>
    <ion-item class="round-inp centerIt">
      <ion-label>
        Email or Phone
      </ion-label>
      <ion-input formControlName="email" type="text" value=""></ion-input>
    </ion-item >
    <br>
    <ion-item class="round-inp centerIt">
      <ion-label>
        Password
      </ion-label>
      <ion-input formControlName="password" type="password"></ion-input>
    </ion-item>
    <br>
    <br>
    <div class="centerIt">
      <button ion-button  outline
        class="button-color-yellow" 
        (click)="openSelectCategory()">
        Login
      </button>
      <button ion-button outline
        class="button-color-yello" 
        (click)="openCreateAccount()">
        Create Account
      </button>
    </div>
    <br>
    <br>
    <div class="centerIt">
      <a href="openLogin()" class="link-align-color" >
        Forgot Password
      </a>
    </div>
  </ion-list>
	</form>
</ion-content>

`

4

1 回答 1

0

您可以将对象从 any 更改为 FormGroup 类型：

private createAccountForm : FormGroup

我很确定，您不需要 ngModel。也尝试其他绑定方法：

表单控件名称

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

[表格控制]

<ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input [formControl]="createAccountForm.controls['password']" type="text"></ion-input>
</ion-item>

我在 plunkr 上用表单做了类似的例子，它工作得很好，看看：

https://plnkr.co/edit/zGenYZz5lzGbWBBTBS9P

于 2018-03-04T10:38:41.017 回答