ionic-framework
ionic-framework copied to clipboard
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 ([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