时间戳

首页 > 解决方案 > 带有 Toast 的离子表单验证器

angular - 带有 Toast 的离子表单验证器

问题描述

我绝对需要你的帮助：p

我是 Ionic 的新手，但如果我做得不好，我真的很想学习，所以请原谅！

这是我的代码 HTML：`

有关 Ionic 页面和导航的更多信息，请参阅http://ionicframework.com/docs/components/#navigation。-->

刻字

<form [formGroup]="formgroup">
<ion-list class="item">

    <ion-row radio-group>

        <ion-col>
          <ion-item>
            <ion-label>Homme</ion-label>
            <ion-radio value="homme"></ion-radio>
          </ion-item>
        </ion-col>
        <ion-col>
          <ion-item>
           <ion-label>Femme</ion-label>
            <ion-radio value="femme"></ion-radio>
          </ion-item>
        </ion-col>
      </ion-row>

  <ion-item>
    <ion-label stacked>Prénom</ion-label>
    <ion-input class="colorInput" type="text" formControlName="prenom" ></ion-input>
  </ion-item>



  <ion-item>
      <ion-label>Date de Naissance</ion-label>
      <ion-datetime class="colorInput" displayFormat="DD/MM/YYYY" ></ion-datetime>
    </ion-item>


  <ion-item>
    <ion-label stacked>Mail</ion-label>
    <ion-input class="colorInput" type="text" formControlName="mail"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label stacked>Mot de passe</ion-label>
    <ion-input class="colorInput" placeholder="Min. 6 caractères" type="password" formControlName="motDePasse"></ion-input>
  </ion-item>

</ion-list>


<button ion-button round class="button" (click)="ToastError();">Connexion</button>

`

我的 TS 文件在这里：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { ToastController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-sign-in',
  templateUrl: 'sign-in.html',
})
export class SignInPage {

  formgroup: FormGroup;

  prenom: AbstractControl;
  mail: AbstractControl;
  motDePasse: AbstractControl;

  constructor(public navCtrl: NavController, public navParams: NavParams, public formbuilder: FormBuilder, public toastCtrl: ToastController) {

    this.formgroup = formbuilder.group({

      prenom: ['',Validators.required],

      mail: ['',Validators.required],
      motDePasse: ['',Validators.required]
    });


    this.prenom = this.formgroup.controls['prenom'];

    this.mail = this.formgroup.controls['mail'];
    this.motDePasse = this.formgroup.controls['motDePasse'];
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SignInPage');
  }

  ToastError(prenom) {
    const Toast = this.toastCtrl.create({
      message: 'pas ok',
      duration: 2000
    });

    if (prenom == '1' ) {
      Toast.present();
    }

  }
}

目标是第一次检查用户是否写了他的名字，如果不是这样，我想出现一个祝酒词。

如果你有一些想法:)

祝你早日/晚安！

标签： angularionic-frameworkionic3

解决方案

只需将此按钮添加到 .html 

<button ion-button round class="button" (click)="ToastError(formgroup.value.prenom)">Connexion</button>

这是 .ts 函数

ToastError(prenom) {

        const Toast = this.toastCtrl.create({
            message: 'pas ok',
            duration: 2000
        });

        prenom ? console.log('prenom found') : Toast.present();

    }

随时发表评论以获得更多帮助

推荐阅读