如何将 FormBuilder 输入绑定到其他以将输出 postData 发送到 API？

Question

HTML:

</div>

    <!-- This content will show if the segement is set to 'register' -->
    <div *ngSwitchCase="'register'">

        <!-- Calls the register function once when the submit button is clicked -->
        <form [formGroup]="register_form" (ngSubmit)="register()" padding>


            <!-- username input -->
            <ion-item class="input-item">
                <ion-label>
                    <ion-icon name="md-person"></ion-icon> usuário
                </ion-label>
                <ion-input formControlName="username" type="text" ></ion-input>
            </ion-item>

           <!-- name input -->
            <ion-item class="input-item">
                <ion-label>
                    <ion-icon name="md-contact"></ion-icon> Nome
                </ion-label>
                <ion-input formControlName="name" type="text"></ion-input>
            </ion-item>

            <!-- email input -->
            <ion-item class="input-item">
                <ion-label>
                    <ion-icon name="md-mail"></ion-icon> Email
                </ion-label>
                <ion-input formControlName="email" type="email"></ion-input>
            </ion-item>

            <!-- password input -->
            <div style="position:relative;">
                <ion-item class="input-item">

                    <!-- show/hide password icon, call showHidePass function -->

                    <ion-label>
                        <ion-icon name="md-lock"></ion-icon> Senha
                    </ion-label>
                    <ion-input formControlName="password" type="{{password_input_type}}"></ion-input>
                </ion-item>

                <div style="position:absolute;right:10px;width:20px;top:12px;color:#aaa;font-size:20px;" (tap)="showHidePass()">
                    <ion-icon name="{{show_hide_icon}}"></ion-icon>
                </div>
            </div>

            <!-- submit button, is disabled when the form is not valid -->
            <button class="register-button" color="secondary" ion-button icon-start type="submit" [disabled]="!register_form.valid">
                <ion-icon name="log-in"></ion-icon>
                <span>Registrar</span>
            </button>

        </form>

    </div>

Register.ts:

import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import { AuthServiceProvider } from "../../providers/auth-service/auth-service";

export class RegisterPage {

    //Defaults
    register_form: any;



constructor(public navCtrl: NavController, private formBuilder: FormBuilder, 
          private loadingCtrl: LoadingController,  private alertCtrl: AlertController,  public authServiceProvider: AuthServiceProvider) {


        // declare the register form
        this.register_form = this.formBuilder.group({
          name:['', Validators.required],
          username: ['', Validators.required],
          email: ['', [Validators.required, Validators.email]],
          password: ['', [Validators.minLength(this.password_max_length),Validators.required]],
        });
    }

   register() {

        this.authServiceProvider.postData(this.register_form, "signup").then((result)=>{

            this.responseData = result;
            console.log(this.responseData);
            localStorage.setItem('register_form', JSON.stringify(this.responseData))

            this.navCtrl.push(EmpresaPage);

        }, (err)=>{

            console.log(err);
        });

NS：我没有通过 HTML 部分中的所有输入提要

Answer 1

您可能还想 post 您的 authServiceProvider 函数。我不确定我是否理解你的问题，但你可以使用 register_form.value 来获取代表你的表单的对象。

Answer 2

也许我误解了你的意思，如果你想 post 输入你的 api，你需要快速从 "register_forms" 中获取值。参见 https://angular.io/api/forms/AbstractControl#value

register() {

    this.authServiceProvider.postData(this.register_form.value, "signup").then((result)=>{

        this.responseData = result;
        console.log(this.responseData);
        localStorage.setItem('register_form', JSON.stringify(this.responseData))

        this.navCtrl.push(EmpresaPage);

    }, (err)=>{

        console.log(err);
    });

如何将 FormBuilder 输入绑定到其他以将输出 postData 发送到 API？

How to bind FormBuilder input in other to send output postData to the API?

ionic-framework

ionic2

angular2-formbuilder

ionic3

angular