Form submit not working

Ionic Framework ionic-v3
1

Hi there,

I’m trying to submit a form with enctype="multipart/form-data" but the submit event never fires.
The form is using FormBuilder for validation.

Here’s the code of my template:

<form [formGroup]="formDati" enctype='multipart/form-data' action="/idio-api/utenti/utente/{{id}}/edit" method="POST" #formTest="ngForm">
   ...
   <button ion-button type="submit">Invia</button>
</form>

And this is my controller:

logForm(f) {
    console.log(f.value);
}

I can see the form logged but no api request is fired. My Network tab is still empty.

Where am I doing wrong?

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v6.0.0
Xcode version: Xcode 8.2.1 Build version 8C1002

PS: I’m using ionic-angular 2.2.0 because 2.3.0 has some bugs in components that I’m using

2

i don’t usually specify the url in the form element. so generally in angular2, what you can do is create an angular service which will interact with your back-end as per below. you can see the example at angular.io

import { Injectable }              from '@angular/core';
import { Http, Response }          from '@angular/http';
@Injectable()
export class TestService {
  private heroesUrl = 'api/heroes';  // URL to web API
  constructor (private http: Http) {}
  sendData(value): {
    return this.http.post(Url) //replace url with the action attribute
                    .map(res: Response => res.json())
                    .catch(this.handleError);
  }
}

Then in your form you can write only

<form [formGroup]="formDati" (ngSubmit)="sendData()" #formTest="ngForm">
   <button ion-button type="submit">Invia</button>
</form>

in your component.ts you inject the angular service and you subscribe to the observable which will call the post method

sendData() {
 let formdata = this.formDati.value.
 this.testservice.sendData(formdata). subscribe( data => {
// then manip[ulate the data response here
}
}

Hope it helps.
Ashley

3

since you are using formGroup which is a model-diven form. why u using ngForm.
but to do in your way maybe try this

<form [formGroup]="formDati" (ngSubmit)="logForm()" enctype='multipart/form-data' action="/idio-api/utenti/utente/{{id}}/edit" method="POST" #formTest="ngForm">
   ...
   <button ion-button type="submit">Invia</button>
</form>

Iam guessing you have defined formDati as a formgroup in your component. to get your formdata
private formDati: FormGroup;
logForm() {
console.log(this.formDati.value);
}

4

I am facing the issue in submit a form with method=“POST”

Here’s the code of my ionic 2 Html template:

<form method="post" action="http://abc.com" name="frm1" id="form1" >
      <input type="submit" value="submit">
</form>

I can not see the form request is fired.
I am using ionic-2.