Ошибка: не удается найти элемент управления с именем в ionic3?

Я создал приложение, используя ionic 3, и я нажимаю на ссылку входа в систему, я получил эту ошибку "Не удается найти элемент управления с именем, электронной почтой, номером, gstNumber, и я попытался formGroupName вместо formControlName, но все еще не работает Пожалуйста, помогите мне разобраться что я делаю не так, и я включил страницу входа и создать учетную запись? `

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>

`

Источник

1 ответ

Вы можете изменить свой объект с любого на тип FormGroup:

private createAccountForm : FormGroup

Я уверен, что вам не нужен ngModel. Попробуйте также другой способ привязки:

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>

Я сделал аналогичный пример на plunkr с формами, и он просто отлично работает, проверьте это:

https://plnkr.co/edit/zGenYZz5lzGbWBBTBS9P

Источник
Другие вопросы по тегам