Как связать вход FormBuilder с другим, чтобы отправить выходные данные postData в API? - PullRequest
Новая
       24

Как связать вход FormBuilder с другим, чтобы отправить выходные данные postData в API?

0 голосов
/ 29 ноября 2018

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

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Может быть, я вас не понял, если вы хотите опубликовать входные данные в вашем 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);
    });
0 голосов
/ 29 ноября 2018

Возможно, вы захотите опубликовать свою функцию authServiceProvider.Я не уверен, что понимаю ваш вопрос, но вы можете использовать register_form.value, чтобы получить объект, представляющий вашу форму.

...