Question

我有这个骑手模型： 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消息中显示成功？

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

任何帮助都将受到高度赞赏..

Answer 1

以下是使用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();
}

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

有关配置Toast控制器的详细信息，请参阅Ionic文档中的Toast Controller。

希望这有帮助。

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

在离子2中形成验证

1 个答案: