ERROR Error: Cannot find control with name in ionic3?

Question

I have create a app using ionic 3 and i click on the login link i got this error "Cannot find control with fname, email,number,gstNumber and i have tried formGroupName instead of the formControlName but still not working Please help me for figuring out what I am doing wrong and i have include the page of login and 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>

`

Answer 1

You can change your object from any to FormGroup type:

private createAccountForm : FormGroup

I'm pretty sure, that you don't need ngModel. Try also the other method of binding:

formControlName

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

[formContol]

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

I made similar example on plunkr with forms and it just works fine, check it out:

https://plnkr.co/edit/zGenYZz5lzGbWBBTBS9P

ERROR Error: Cannot find control with name in ionic3?

Question

1 answers

solution1
0 2018-03-04 10:38:41

ERROR Error: Cannot find control with name in ionic3?

Question

1 answers

solution1 0 2018-03-04 10:38:41

solution1
0 2018-03-04 10:38:41