Ioinc 4 - form and submit button

[Jekes]

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

[rapropos]

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

[yewness]

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>

[Jekes]

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

[jonmikelm]

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

[esales]

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

[keshavking111]

please help

ERROR Error: Uncaught (in promise): TypeError: Cannot create property ‘validator’ on string ‘email’
TypeError: Cannot create property ‘validator’ on string ‘email’
at setUpControl (forms.js:2055)
at FormControlDirective.push…/node_modules/@angular/forms/fesm5/forms.js.FormControlDirective.ngOnChanges (forms.js:5064)
at checkAndUpdateDirectiveInline (core.js:22095)
at checkAndUpdateNodeInline (core.js:23363)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckDirectivesFn (core.js:23919)
at Object.eval [as updateDirectives] (LoginPage.html:30)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
at checkAndUpdateView (core.js:23307)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
defaultErrorLogger @ core.js:15724
push…/node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15772
next @ core.js:17771
schedulerFn @ core.js:13515
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push…/node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push…/node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
(anonymous) @ core.js:17321
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push…/node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push…/node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
onHandleError @ core.js:17321
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push…/node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:164
_loop_1 @ zone.js:694
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push…/node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push…/node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:25
(anonymous) @ pages-login-login-module.js:1

[Technbuzz]

Update @ionic/angular to 4.7.4 (which is currently the latest version) and just use it like a regular html form submit button

<ion-button type="submit" expand="block" color="success" >Register</ion-button>

[JovanyMezura]

me to solved my issue thoughts this way.

[keshavking111]

hi guys can we do like this in ionic5.
Please help,
thanks