Валидатор ионной формы с тостами

Question

Мне нужна ваша помощь: p

Я новичок в Ionic, но я действительно хочу учиться, так что извините, если я не очень хорошо!

Вот мой код HTML: `

См. http://ionicframework.com/docs/components/#navigation для получения дополнительной информации о Ионные страницы и навигация. ->

Inscrivez уоиз

<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();
    }

  }
}

Цель состоит в том, чтобы в первый раз проверить, написал ли пользователь свое имя, если это не тот случай, когда я хочу, чтобы появился тост.

Если у вас есть идеи:)

Хорошего дня / ночи!

Answer 1

Просто добавьте эту кнопку в .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();

    }

Не стесняйтесь комментировать для получения дополнительной помощи