使用formbuilder后,Ionic2服务显示空白屏幕

时间:2017-01-16 10:19:20

标签: ionic-framework ionic2

我有一个登录页面。它工作正常。我更改了登录表单以使用FormBuilder。

构建过程中或开发人员工具中报告的任何内容都没有错误。但是当使用离子服务运行时,应用程序显示空白屏幕。

以下是login.html中更改的代码。

 <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" >
 <ion-row>
    <ion-col>
      <ion-list inset>

        <ion-item>
          <ion-input type="text" placeholder="Username" formControlName="username" ></ion-input>
        </ion-item>
        <p *ngIf="username.hasError('required') && username.touched" danger>Username is required</p>
        <ion-item>
          <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
        </ion-item>
        <p *ngIf="password.hasError('required') && password.touched" danger>Password is required</p>           
      </ion-list>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col class="signup-col">
      <button ion-button class="submit-btn" full type="submit" [disabled]="!loginForm.valid">Login</button>
      <button ion-button class="register-btn" block clear (click)="createAccount()">Create New Account</button>
    </ion-col>
  </ion-row>

</form>

以下是login.ts中更改的代码。

 import { Component } from '@angular/core';
 import { NavController, AlertController, LoadingController, Loading } from 'ionic-angular';
 import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
 import { AuthService } from '../../providers/auth-service';
 import { RegisterPage } from '../register/register';
 import { HomePage } from '../home/home';

 @Component({
 selector: 'page-login',
 templateUrl: 'login.html'
 })

 export class LoginPage {
 loading: Loading;
 registerCredentials = {username: '', password: ''};

 loginForm: FormGroup;
 username: FormControl;
 password: FormControl;

 constructor(private nav: NavController, private auth: AuthService, 
 private alertCtrl: AlertController, private loadingCtrl:   LoadingController, 
   public formBuilder: FormBuilder) {

  this.loginForm = formBuilder.group({
  username: ['', Validators.required],
  password: ['', Validators.required],
  });

  this.username = this.loginForm['username'];
  this.password = this.loginForm['password'];   
  }

0 个答案:

没有答案