Can't type in fields on login form with Ionic


#1

I have the following login form that I display when my app first loads.

<ion-card-content class="stormpath-form">
  <form #loginForm="ngForm" (ngSubmit)="login(loginForm.value)" autocomplete="off">
    <ion-row>
      <ion-col>
        <ion-list inset>
          <ion-item>
            <ion-input placeholder="Email" name="login" id="loginField" type="text" required [(ngModel)]="loginFormModel.login"></ion-input>
          </ion-item>
          <ion-item>
            <ion-input placeholder="Password" name="password" id="passwordField" type="password" required [(ngModel)]="loginFormModel.password"></ion-input>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div *ngIf="error" class="alert alert-danger">{{error}}</div>
        <button ion-button class="submit-btn" full type="submit" [disabled]="!loginForm.form.valid">Login</button>
        <button ion-button class="forgot-btn" type="button" block clear (click)="forgot()">Forgot Password?</button>
      </ion-col>
    </ion-row>
  </form>
</ion-card-content>

This works fine when I run ionic serve and view my application in Chrome. However, when I run ionic emulate ios, I’m unable to type in the <ion-input> elements. I can see the cursor, but then it disappears after I click on the field. The keyboard also doesn’t show up.

Any idea what might be causing this behavior?


#2

I was able to workaround this issue by going to Hardware > Keyboard > Toggle Software Keyboard in iOS Simulator. However, I’m getting an error and I’m unable to see the logs. Here’s what Ionic says:

No target specified for emulator. Deploying to iPhone-SE, 10.2 simulator

com.ionicframework.myfirstapp745121: 84078

logPath: /Users/mraible/dev/myapp/platforms/ios/cordova/console.log

If I try to cat or ls the console.log file, it doesn’t exist.


#3

Oh that’s just because you don’t have any phone plugged into your computer. Or don’t really know it works on Macs, but if I have my Android phone plugged into my pc it just prioritizes launching the App on my phone rather than putting it up on a simulator.
No idea what’s up with the log file


#4

You can change the target by passing --target, for example:

ionic run ios --prod --target=iPhone-6

For a list of targets, you can run:

cordova emulate ios --list

Are you getting an error that is preventing the simulator from starting, or is it after launching the app?


#5

I’m able to get the simulator to run and view my app. However, there is no console.log file created on my machine. Also, I’m not able to do ionic build ios --prod or ionic run ios --prod. Both result in:

[14:18:07]  ionic-app-scripts 1.0.0 
[14:18:07]  build prod started ... 
[14:18:07]  clean started ... 
[14:18:07]  clean finished in 6 ms 
[14:18:07]  copy started ... 
[14:18:07]  ngc started ... 
[14:18:08]  ionic-app-script task: "build" 
[14:18:08]  TypeError: compiler_cli_1.ReflectorHost is not a constructor 
TypeError: compiler_cli_1.ReflectorHost is not a constructor
    at new AotCompiler (/Users/mraible/dev/myapp/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:31:30)
    at ngcWorker (/Users/mraible/dev/myapp/node_modules/@ionic/app-scripts/dist/ngc.js:19:20)
    at Object.ngc (/Users/mraible/dev/myapp/node_modules/@ionic/app-scripts/dist/ngc.js:9:12)
    at buildProject (/Users/mraible/dev/myapp/node_modules/@ionic/app-scripts/dist/build.js:95:51)
    at /Users/mraible/dev/myapp/node_modules/@ionic/app-scripts/dist/build.js:43:16

#6

By any chance are you trying to use Angular 2.3?


#7

Yes. I’m using Angular 2.3.1.


#8

See if the problem persists even when pinning the exact dependencies documented in the changelog entry for rc5.


#9

The problem goes away if I replicate the dependencies you mention. Too bad, I’d like to use a library that depends on Angular 2.3+. FWIW, I’m able to use 2.3.1 and run it in Chrome successfully. I’m even able to run ionic build ios and open the project in Xcode and deploy it to my phone. It all seems to work OK, it’s just the build command fails.


#10

Yes, see @danbucholtz’s response to your comment on #686.


#11

change the simulator hardware key board

step-1: goto simulator
step-2: choose hardware option
step-3: choose key board option
step-4: choose right key board in the list