Ошибка проверки реактивной формы Angular 6 и Ionic 3 не отображается

Question

Я работаю над проектом, который использует последнюю версию Angular и Ionic.Я работаю на странице регистрации.Мне нужно отобразить некоторые ошибки, когда ввод формы недействителен.Я использую форму Angular Reactive в своем проекте, но если я проверяю ошибку на странице, она не отображается.Это только подчеркивание красным цветом, но мне нужно показать некоторые читаемые ошибки

Вот мой код просмотра

<code><ion-content padding>
  <ion-list class="items-middle" text-center>
    <!-- use the [formGroup] directive to tell Angular that we want to use the registrationForm as the "FormGroup" for this form: -->
    <form [formGroup]="registrationForm">
      <ion-item>
        <ion-label floating>Full Name</ion-label>
        <ion-input type="text" formControlName="userName"></ion-input>
        <div *ngIf="!registrationForm.controls['userName'].valid && registrationForm.controls['userName'].touched"> name is required</div>
      </ion-item>
      <!-- <ion-item>
                <ion-label color="ligh-grey" floating>Email</ion-label>
                <ion-input type="email" formControlName="email"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label color="ligh-grey" floating>Date of Birth</ion-label>
                <ion-input type="text" formControlName="dob"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label color="ligh-grey" floating>Phone Number</ion-label>
                <ion-input type="number" formControlName="phone" pattern="[0-9]*"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label color="ligh-grey" floating>Address</ion-label>
                <ion-input type="text" formControlName="address"></ion-input>
            </ion-item>
            <ion-item class="job_status">
                <ion-label color="ligh-grey" floating>Job Status (Position)</ion-label>
                <ion-input type="text" formControlName="jobStatus"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>Job Sector</ion-label>
                <ion-select formControlName="jobSectore">
                    <ion-option value="f">Government</ion-option>
                    <ion-option value="m">Private</ion-option>
                </ion-select>
            </ion-item>
            <input type="checkbox" formControlName="isTosRead"> -->
      <!-- We can check if our form is valid: -->
      <ion-buttons padding-top>
        <button ion-button full round type="submit" [disabled]="!registrationForm.valid">SIGNUP</button>
      </ion-buttons>
    </form>
    <pre> {{registrationForm.status}}

{{registrationForm.value | json }}

А это мой файл TS

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

@IonicPage()
@Component({
  selector: 'page-registration',
  templateUrl: 'registration.html',
})
export class RegistrationPage {

  registrationForm: FormGroup;
  userName: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
    // this.registrationForm = new FormGroup({
    //   userName: new FormControl('', [Validators.required, Validators.minLength(2), Validators.pattern('^[a-zA-Z]+$')]),
    //   email: new FormControl('', [Validators.required, Validators.email, Validators.minLength(4)]),
    //   dob: new FormControl('', [Validators.required, Validators.minLength(4)]),
    //   phone: new FormControl('', [Validators.required, Validators.minLength(9), Validators.maxLength(10)]),
    //   address: new FormControl('', [Validators.required, Validators.minLength(9), Validators.maxLength(255)]),
    //   jobStatus: new FormControl('', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]),
    //   jobSectore: new FormControl('', [Validators.required]),
    //   isTosRead: new FormControl(false, [Validators.requiredTrue])
    // })

    this.registrationForm = this.fb.group({
      'userName': [null, Validators.compose([Validators.pattern('^[a-zA-Z]+$'), Validators.required])]
    });
  }
}

Что здесь не так?Почему я не получаю условие *ngIf, консоль не отображает никаких ошибок.

Answer 1

Добавьте <span> тег с помощью formControl следующим образом:

ИЛИ Добавьте class="text-danger" в ваш текущий <div>.

.html файл.

Дисплей required Сообщение об ошибке

<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('required') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Field is required</span>

Дисплей pattern Сообщение об ошибке

<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('pattern') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Enter valid username.</span>

ts файл.

this.registrationForm = this.fb.group({
  'userName': [null, Validators.compose([Validators.pattern('^[a-zA-Z]+$'), Validators.required])]
});

Answer 2

Вам нужно добавить сообщение об ошибке div вне тега ion-item, например:

<code><ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list class="items-middle" text-center>
    <form [formGroup]="registrationForm">
      <ion-item>
        <ion-label floating>Full Name</ion-label>
        <ion-input type="text" formControlName="userName"></ion-input>
      </ion-item>
      <div *ngIf="registrationForm.get('userName').touched && registrationForm.get('userName').invalid"> name is required</div>
      <ion-buttons padding-top>
        <button ion-button full round type="submit" [disabled]="!registrationForm.valid">SIGNUP</button>
      </ion-buttons>
    </form>
    <pre> {{registrationForm.status}}

 {{registrationForm.value | json }}

 {{registrationForm.get('userName').invalid | json }}

 {{registrationForm.get('userName').touched | json }}

</ Ион-лист> </ Ион-контент>

Кроме того, вы можете просто использовать registrationForm.get('userName').touched && registrationForm.get('userName').invalid">

Вот Образец StackBlitz .

Answer 3

Попробуйте изменить условие следующим образом:

this.registrationForm = this.fb.group({
      userName: [
        null, Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-zA-Z]+$'), Validators.required])
      ],

РЕДАКТИРОВАТЬ

Также измените шаблон следующим образом:

<ion-item *ngIf="!registrationForm .controls.userName.valid && (registrationForm .controls.userName.dirty)"> <p>Please enter a valid name.</p> </ion-item>