ionic 2中的表单验证

第108话

我有这个骑手模型:rider.ts

export class Rider {
name: String;
mobileNumber: Number;
email: String;
password: String;
confirmPassword: String;
gender: String;
city: String;

}

signUp.html :

<ion-header>
  <ion-navbar color="primary">
   <ion-title>Signup</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
 <form id="sign-form"  [formGroup]="signUp" >
  <ion-list>
   <div class="input-box">
    <ion-item>
      <ion-label floating>Full Name</ion-label>
      <ion-input type="text"  formControlName=rider.name></ion-input>
    </ion-item>
  </div>

  <div class="input-box">
    <ion-item>
      <ion-label floating>Mobile Number</ion-label>
      <ion-input type="number" formControlName="mobileNumber" ></ion-input>
    </ion-item>
  </div>


  <div class="input-box">
    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="email" formControlName="email" ></ion-input>
    </ion-item>
  </div>

  <div class="input-box">
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password" formControlName="password" ></ion-input>
    </ion-item>
  </div>

  <div class="input-box">
    <ion-item>
      <ion-label floating>Confirm Password</ion-label>
      <ion-input type="password" formControlName="confirmPassword" >
      </ion-input>
    </ion-item>
  </div>

  <div class="input-box">
    <ion-item>
      <ion-select interface="popover" class="select-option" 
       formControlName="gender" >
        <ion-option selected>Male</ion-option>
        <ion-option>Female</ion-option>
      </ion-select>
    </ion-item>
  </div>


  <div class="input-box">
    <ion-item>
      <ion-select interface="popover" class="select-option" 
    formControlName="city" >
        <ion-option selected>NewYork</ion-option>
        <ion-option>London</ion-option>
        <ion-option>Dubai</ion-option>
      </ion-select>
    </ion-item>
  </div>



  <div>
    <button ion-button color="primary" block color="secondary" 
  [disabled]="!signUp.valid"(click)="submit()">Sign Up</button>
  </div>

</ion-list>

Rider.ts 是:

          import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { IonicPage, NavController, ToastController } from 'ionic-angular';

import { User } from '../../providers/providers'; 
import { MainPage } from '../pages';
import { Rider } from '../../models/rider';

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

export class SignupPage {

  public signUp: FormGroup;

  constructor(public navCtrl: NavController,
    public user: User,
    public toastCtrl: ToastController,
    public translateService: TranslateService,
    public formBuilder: FormBuilder
    ) {
      this.signUp = new FormGroup({
      name: new FormControl('', [Validators.required,]),
      mobileNumber: new FormControl('',[Validators.required,Validators.minLength(10)]),
      email: new FormControl('', [Validators.required,Validators.email]),
      password: new FormControl('', Validators.required),
      confirmPassword: new FormControl('', Validators.required),
      gender: new FormControl('', Validators.required),
      city: new FormControl('', Validators.required),
   });

    }
  }
}

如何将我的骑手模型连接到我的表单输入?

注册完成后,如果使用详细信息错误并在toast消息中显示成功,如何显示toast消息?

我是 ionic 的新手..所有可用的教程都没有显示这个..方法。

任何帮助将不胜感激..

西蒙·L·布拉泽尔

这是使用 Toast 消息反馈表单提交和值的快速演示:

public submit() {
  if(this.signUp.valid && this.signUp.value.password === this.signUp.value.confirmPassword) {
    // Create new Rider object and add values
    let rider = new Rider();
    rider.name = this.signUp.value.name;
    rider.mobileNumber = this.signUp.value.mobileNumber;
    rider.email = this.signUp.value.email;
    rider.password = this.signUp.value.password;
    rider.confirmPassword = this.signUp.value.confirmPassword;
    rider.gender = this.signUp.value.gender;
    rider.city = this.signUp.value.city;
    this.showToast('Form valid!!!')
    // Do something with rider...
  } else if(this.signUp.value.password !== this.signUp.value.confirmPassword) {
    this.showToast("Passwords don't match!")
  } else {
    this.showToast('Form invalid')
  } 
}

private showToast(message: string): void {
  let toast = this.toastCtrl.create({
    message: message,
    duration: 5000,
    showCloseButton: true
  });
  toast.present();
}

但是submit()永远不会到达else 块,除非您[disabled]="!signUp.valid"从 HTML 模板中的提交按钮中删除 ,因为当前该按钮将保持禁用状态,直到表单完全有效,因此无法提交无效表单。

吐司控制器在离子文档有关配置吐司控制器的更多细节。

希望这可以帮助。

编辑 - 包括非常基本的密码确认。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章