Ioni c Validation - показывать сообщение об ошибке как материал - PullRequest
Новая
       7

Ioni c Validation - показывать сообщение об ошибке как материал

0 голосов
/ 02 апреля 2020

Я работал на странице входа и регистрации в Ioni c 5. Я хотел отобразить сообщения об ошибках под текстовым полем ввода, как здесь

enter image description here

Итак, я реализовал Angular Отзывчивые формы 

  ngOnInit() {
    this.afAuth.authState.subscribe(data => console.log(data));

    this.myForm = this.fb.group({
      email: ['', [
        Validators.required,
        Validators.email
      ]],
      password: ['', [
        Validators.required,
        Validators.pattern('^(([a-zA-Z][^:.*/}{;])*\d*)$')
      ]]
    });
  }

  get email(){
    return this.myForm.get('email');
  }

  get password(){
    return this.myForm.get('password');
  }

После этого я создал форму с двумя полями ввода ионов. 

<ion-item class="input_item">
  <ion-label position="floating">E-Mail</ion-label>
  <ion-input formControlName="email" position="floating"></ion-input>
</ion-item>

<div class="validation-errors">
    <div class="error-message" *ngIf="email.errors && email.dirty || email.touched">
      Your E-Mail is invalid!
    </div>
</div>

Я пытался использовать этот класс "validation-errors", но он не отображал сообщение так, как я хотел. Мне удалось заставить его выглядеть так:

enter image description here

Но есть ли какой-нибудь более простой способ отобразить сообщение об ошибке, как Angular Материал это делает? Что-то от Ioni c я могу использовать, или мне нужно реализовать Angular Material UI компонентов?

Спасибо за ответ.

...