Question

submitdata(){
    let url = "my api url here ";
   let httpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'multipart/form-data'
      })
  };
  let body = JSON.stringify({
    fData : this.contactForm.value.name
  });
  this.http.post(url,body,httpOptions)
  .subscribe((data)=>{
    console.log(data);
  })
  }

 <form [formGroup]="contactForm" (ngSubmit)="submitdata()" >

  <ion-list>

    <ion-item>
      <ion-label floating>Name</ion-label>
      <ion-input type="text" formControlName="name" [(ngModel)] = "name" ></ion-input>
    </ion-item>
  
    <ion-item>
      <ion-label floating>Contact</ion-label>
      <ion-input type="number" formControlName="contact" [(ngModel)] = "contact"></ion-input>
    </ion-item>
  
    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="email" formControlName="email" [(ngModel)] = "email"></ion-input>
    </ion-item>

   
  </ion-list>
    <button ion-button type="submit" >Submit Form</button>
  </form>

嗨，我正在使用http post方法将表单数据发送到服务器，但是我在控制台中获取了空数组。我尝试了很多方法，但没有获取表单数据。

Answer 1

这是为您提供的一个示例，您使formContol和ngModel混淆了，您可以使用一件事就足够了，这里iam使用了模板驱动的示例方法。

HTML文件

<form #contactForm="ngForm" (ngSubmit)="submitdata(contactForm.value)" >

    <ion-list>

    <ion-item>
      <ion-label floating>Name</ion-label>
      <ion-input type="text" name="name" [(ngModel)] = "name" ></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Contact</ion-label>
      <ion-input type="number" name="contact" [(ngModel)] = "contact"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="email" name="email" [(ngModel)] = "email"></ion-input>
    </ion-item>

  </ion-list>
    <button ion-button type="submit" >Submit Form</button>
</form>

打字稿文件

  name:any;
    email:any;
    contact:any;

    submitdata(formValue:any){
            console.log("Form Value",formValue);
        }

这是示例输出屏幕

有关更多参考信息，请访问官方网站

https://angular.io/guide/forms

确保必须在app.module.ts文件中包含FormsModule，

import { FormsModule, ReactiveFormsModule } from '@angular/forms'

 imports: [
    FormsModule, 
    ReactiveFormsModule,
  ],

我使用了两种方式的数据绑定方法，也可以将值组件传递给html文件，

constructor() {
 this.name="Muthu";
 this.email="muthu@gmail.com";
 this.contact="1234567890"
}

像这样

无法通过ionic在http帖子上获取Form值

1 个答案: