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>

`

Sebastian Straburzyński · Answer 1 · 2018-03-04T12:08:42.383

0

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

edited Mar 04 '18 at 12:08

answered Mar 04 '18 at 10:38

Sebastian Straburzyński

445
7
10

Sir i have import both the module but still got same error check my updated fiddle i have add the flles ,but my problem is not resolved? – Kapil Soni Mar 04 '18 at 10:58
Hi @kapilsoni, I have edited my answer and made example plunkr. – Sebastian Straburzyński Mar 04 '18 at 12:09
Sir i check this fiddle and but in my case i properly inject all the files that you have mentioned in module.ts file but i don't understand what's the problem behind that? – Kapil Soni Mar 04 '18 at 12:33
Can you provide some more code or your repository, so I can build it myself? – Sebastian Straburzyński Mar 04 '18 at 12:34
sir check my updated fiddle i have add the code and tell me what's the wrong in my code? – Kapil Soni Mar 04 '18 at 12:44
Can you put somewhere your whole project? It's hard to tell by just looking in code without debugging. – Sebastian Straburzyński Mar 04 '18 at 12:58
No sir its not possible for me? – Kapil Soni Mar 04 '18 at 13:00
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166189/discussion-between-kapil-soni-and-sebastian-straburzynski). – Kapil Soni Mar 04 '18 at 13:00

ERROR Error: Cannot find control with name in ionic3?

1 Answers1