ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

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

Open atsoares opened this issue 6 years ago • 7 comments

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 ([email protected])
   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

atsoares avatar Jun 14 '19 18:06 atsoares