Question

我想传递注册表单的输入值，以将其发布到rest API中。我在提供程序（user.ts）中提出了API请求。我将表单数据添加到请求的正文中，并且在传递表单值时遇到问题给提供商。

我的模板：

RewriteBase

我的组件：

  <ion-row>
    <ion-col col-12 pager> 

          <ion-list  class="signupForm">

            <ion-item class="input1">
              <ion-label floating>Full Name</ion-label>
              <ion-input type="text" [(ngModel)]="userData.fullName" name="fullName" ></ion-input>
            </ion-item>

            <ion-item class="">
              <ion-label floating>
                  <ion-icon name="mail"></ion-icon> 

                Email</ion-label>
              <ion-input    [(ngModel)]="userData.email" pattern=""  type="Email" ></ion-input>

          </ion-item>


          <ion-item>
              <ion-label floating>
                <ion-icon name="lock"></ion-icon> 
                Password
              </ion-label>
              <ion-input   type="password" [(ngModel)]="userData.password" name="password" ></ion-input>
            </ion-item>


            <ion-item class="input2">

              <button class="regButton" type="submit" ion-button full round  (click)="doSignup()" >Sign Up</button>

            </ion-item>
          </ion-list>
                      </ion-col>
  </ion-row>

我的提供者：

          @Component({
              selector: 'page-signup',
               templateUrl: 'signup.html',
               providers: [UserProvider] // ADD HERE -> Also add in 
               App.module.ts

                 })
               export class SignupPage {

                  loading: any;
                   profiletype : string;



                    constructor(private UserProvider : UserProvider ,public 
                    navCtrl: NavController, public navParams: NavParams, 
                     public authService: UserProvider, public loadingCtrl: 
                    LoadingController, private toastCtrl: ToastController) { 
                     }

                    responseData : any;

                    userData = {"fullName": "","email": "", "acc_type": 
                    "","password": ""};

                    doSignup() {
                   this.showLoader();
                   this.authService.register(this.userData).then((result) => 
                   {
                     this.loading.dismiss();
                    this.navCtrl.pop();
                    }, (err) => {
                     this.loading.dismiss();
                     this.presentToast(err);
                     console.log(this.userData.acc_type)

                });
                  }

                      showLoader(){
                    this.loading = this.loadingCtrl.create({
                      content: 'Authenticating...'
                     });

                   this.loading.present();
                    }

                     presentToast(msg) {
                  let toast = this.toastCtrl.create({
                 message: msg,
               duration: 3000,
               position: 'bottom',
               dismissOnPageChange: true
                });

              toast.onDidDismiss(() => {
               console.log('Dismissed toast');
                  });

              toast.present();
                 }

我陷入了这个问题，无法解决。

Answer 1

已观察到，您的apiUrl为空白。还需要验证您在Post API中传递的数据。假设一切正常（例如apiUrl和post api中的有效负载数据），则仅代码中的更正将添加JSON.stringify。请通过添加以下内容来更新您的现有代码：

this.http.post(apiUrl+'Regestier', JSON.stringify(data), {headers: headers})
.subscribe(res => {
    resolve(res.json());
}, (err) => {
    reject(err);
});

用ionic 3发布表单数据

1 个答案: