Ioinc 4 - form and submit button

#1

Hi,

I have a question, i don’t if it’s a bug or not. I made a login form with ionic 4

  <form [formGroup]="loginForm" (submit)="onSubmit()">
      <ion-item>
        <ion-label>username</ion-label>
        <ion-input type="text" formControlName="username"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>password</ion-label>
        <ion-textarea type="text" formControlName="password"></ion-textarea>
      </ion-item>
      <ion-button type="submit" [disabled]="!loginForm.valid">Submit</ion-button>
    </form>

The submit function from my .ts file is not working, but when a change
<ion-button type="submit" [disabled]="!loginForm.valid">Login</ion-button>
to
<button ion-button type="submit" [disabled]="!loginForm.valid">Login</button>
It’s working well.
Have anybody an answer ?
Thank’s

3 Likes
Ionic 4 bion-input issue
#2

What Ionic version are you using? This appears to have been fixed three weeks ago.

#3

Same here

  <form [formGroup]="userForm" (ngSubmit)="onSubmit()" padding-right>
    <ion-item>
      <ion-label position="floating">Email/Username</ion-label>
      <ion-input type="text" formControlName="email" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" formControlName="password" required></ion-input>
    </ion-item>
    <button type="submit" class="btn btn-primary">Submit</button>
    <ion-button type="submit" color="primary" expand="block" [disabled]="!userForm.valid">Login</ion-button>
</form>

Button works but ion button submit and refresh by itself.

======= Updated . =======

This one seem to work well.

  <form [formGroup]="userForm" padding-right>
    <ion-item>
      <ion-label position="floating">Email/Username</ion-label>
      <ion-input type="text" formControlName="email" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" formControlName="password" required></ion-input>
    </ion-item>

    <ion-button 
      color="primary" 
      expand="block" 
      [disabled]="!userForm.valid" 
      (click)="loginForm()">Login</ion-button>
</form>
1 Like
#4

I use Ionic 4 / ionic-cli 4.0.2, my package.json is

    "@angular/common": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/router": "6.0.9",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.0",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/schematics-angular": "1.0.1",
    "@ionic/storage": "^2.1.3",
    "cordova-sqlite-storage": "^2.3.3",
    "core-js": "^2.5.3",
    "rxjs": "6.2.2",
    "zone.js": "^0.8.26"

The solution with the click event on the button work well yes.

Thank’s

1 Like
#5

Same problem here. Solved with the click event on the button.

1 Like