bug: fab-button with type "submit" does not submit the form

Bug Report

Ionic version:
[x] 4.x

Current behavior:
Hi, I want to use a fab button type submit inside a form but it doesn't trigger ngSubmit. Please Help.

Expected behavior:
It works when I use a normal button but I wanted to use FAB bc of the style and easily way to put it aligned in the page.

Steps to reproduce:

Related code:

<form [formGroup]="enviarDocumentosForm" style="padding-top: 0;" (submit)="enviarDocumentos(enviarDocumentosForm.value)">
    <ion-row justify-content-center align-items-center style="height: 100%; margin:auto;">
      <ion-col size-md="6" size-lg="5" size-xs="12">
        <div padding>
          <ion-row justify-content-center>
            <ion-label floating>Digite o CPF do cliente</ion-label>
          </ion-row>
          <br/>
          <ion-row justify-content-center>
            <ion-item lines="none"> 
              <div class="ion-text-center">
                <ion-input id="nrCpfClienteId" type="tel" formControlName="nrCpfCliente" placeholder="CPF" placego clearInput clearOnEdit="false" maxlength="14"  [brmasker]="{form: enviarDocumentosForm.get('nrCpfCliente'), person: true}"></ion-input>
              </div>
            </ion-item>
          </ion-row>
        </div>
      </ion-col>
    </ion-row>
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button type="submit">
          <ion-icon name="cloud-upload"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </form>

Other information:

https://forum.ionicframework.com/t/someform-ngform-the-someform-submitted-flag-is-not-working-ionic-4/158661

There are people with the same issue and the documentation shows that ion-fab-button has type property with submit as option.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (C:\Users\Alex\ambiente\projetos.neon\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 14 other plugins)

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Thanks for your issue! THe reason ion-fab-button does not work with form is correct. Take a look at the ion-button (https://github.com/ionic-team/ionic/blob/master/core/src/components/button/button.tsx#L134) - here you will see the click listener which looks for a form. This is missing in ion-fab-button

If you want you can create a PR, that would be great :)

Oh, sure! For now I just copied the same fab-button css style to the ion-button to solve my problem temporally but I'll do it! It's in the documentation so it should work!

Just stumbled over the same problem. Any news on this?

@meisterlampe

@meisterlampe here is what I did to solve it:

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-button type="submit">
      <ion-icon slot="start" name="cloud-upload"></ion-icon>
    </ion-button>
</ion-fab>

Hi.
Thanks for your answer.
This made submit working, but I'm struggling with styling it the same way as the fab button now.

How did you apply the css-style of the fab-button to this ion-button?

@meisterlampe

@meisterlampe in the page.sccs I changed the ion-button css to the same fab-button css, like this:

:host{
  ion-button{
    --transition: background-color,opacity 100ms linear;
    --ripple-color: currentColor;
    --border-radius: 50%;
    --border-width: 0;
    --border-style: none;
    --border-color: initial;
    --padding-top: 0;
    --padding-end: 0;
    --padding-bottom: 0;
    --padding-start: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;   
    display: block;     
    width: 56px;
    height: 56px;
    position: relative;
    font-size: 14px;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
    -webkit-font-kerning: none;
    font-kerning: none;
    ion-icon{
      margin: 0;
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
}

Works like a charm. Thanks a lot for your fast answer!

fix(fab-button): restore submit, reset, and disabled form functionali…

Thanks for the issue report and your patience! The fix for this has been deployed as part of v8.8.17!

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

fix(fab-button): restore submit, reset, and disabled form functionali…

Navigation Menu

Repository navigation

bug: fab-button with type "submit" does not submit the form #18550

Bug Report

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug: fab-button with type "submit" does not submit the form #18550

Description

Bug Report

Activity

paulstelzer commented on Jun 14, 2019

atsoares commented on Jun 14, 2019

meisterlampe commented on Jan 21, 2020

atsoares commented on Jan 21, 2020

meisterlampe commented on Jan 22, 2020

atsoares commented on Jan 22, 2020

meisterlampe commented on Jan 22, 2020

ShaneK commented on Aug 5, 2026

ionitron-bot commented on Sep 4, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions