Мои ошибки формы не отображаются в форме в приложении Ionic

Question

Я работаю над страницей регистрации в Ionic App и также проверил поля, но ошибки не появляются в форме.

Это мой register.html:

<ion-header>
  <ion-navbar swipeBackEnabled="false">
    <button ion-button menuToggle start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <div class="mydiv1"><img src="assets/imgs/logo3.png" class="slide-image11" /></div>
    <div class="mydiv2">
      <ion-icon name="cart" class="myicon22" (click)="cardpage2()"></ion-icon>
      <ion-icon name="heart" class="myicon22"></ion-icon>
      <ion-icon name="search" class="myicon22"></ion-icon>
    </div>
  </ion-navbar>
</ion-header>


<ion-content padding class="newbg11">
  <ion-grid align-items-center justify-content-center style="height: 100%;">
    <ion-row align-items-center justify-content-center style="height: 100%;">
      <ion-col align-self-center col-12 style="text-align: center;">
        <h1 class="newh1">Register Here</h1>
      <form [formGroup]="todo" (ngSubmit)="getregisterUsers()">
        <ion-list>
          <ion-item class="newitem2">
            <ion-input placeholder="Your Full Name" type="text" [(ngModel)]="useregData.uname" formControlName="uname" required></ion-input>
          </ion-item>
          <ion-item class="newitem2">
            <ion-input placeholder="Email" type="email" [(ngModel)]="useregData.uemail" formControlName="uemail" required></ion-input>
            <ng-container *ngFor="let validation of validation_messages.email">
        <div class="error-message" *ngIf="todo.get('email').hasError(validation.type) && (todo.get('username').dirty || todo.get('username').touched)">
          {{ validation?.message }}
        </div>
      </ng-container>
          </ion-item>
          <ion-item class="newitem2">
            <ion-input placeholder="Phone Number" type="number" [(ngModel)]="useregData.unumber" formControlName="unumber" required></ion-input>
          </ion-item>
          <ion-item class="newitem2">
            <ion-input placeholder="Password" type="password" [(ngModel)]="useregData.password" formControlName="password" required></ion-input>
          </ion-item>
          <div padding>
            <button [disabled]="!todo.valid" ion-button type="submit" class="newbtn11" color="primary" block>Register</button>
          </div>
        </ion-list>
      </form>
      <h2><span>OR</span></h2>
      <p><span menuClose swipeBackEnabled="false" (click)="loginback2()" class="newspan2">Back To Login</span></p>
    </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

В этом html появляется ошибка. Ошибка: Uncaught (в обещании): TypeError: Невозможно прочитать свойство 'hasError' с нулевым значением.

Это мой register.ts :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { LoginpagePage } from '../loginpage/loginpage';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import { CartPage } from './../cart/cart';
import { RestapiProvider } from '../../providers/restapi/restapi';

@IonicPage()
@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage {
  todo : FormGroup;
  responseData2 : any;
  useregData = {"uname": "", "uemail": "", "unumber": "", "password": "" };
  constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public restProvider: RestapiProvider, private alertCtrl: AlertController) {
    this.todo = this.formBuilder.group({
      uname: ['', Validators.required],
      uemail: ['', Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])],
      unumber: ['', Validators.compose([
        Validators.maxLength(10),
        Validators.minLength(10),
        Validators.required
      ])],
      password: ['', Validators.required],
    });
  }

  validation_messages = {
'email': [
  { type: 'pattern', message: 'Email Format is Invalid' }
],
  }

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

  getregisterUsers()
  {
    this.restProvider.getregisterUsers(this.useregData, 'register').subscribe((data) => {
      console.log(data);
      if (data) {
        this.responseData2 = data;
        console.log(this.responseData2.msg);
        if (this.responseData2.status === 'success') {
          this.navCtrl.push(LoginpagePage);
        }
        else{
          this.presentAlert();
        }
      }
    });
  }

  presentAlert() {
    let alert = this.alertCtrl.create({
      title: 'You are using an already registered Email id',
      buttons: ['Dismiss']
    });
    alert.present();
  }

  loginback2()
  {
    this.navCtrl.push(LoginpagePage);
  }

  cardpage2()
  {
    this.navCtrl.push(CartPage);
  }
}

Я не могу показать ошибку в реестре html. Любая помощь очень ценится.

Answer 1

you can try this code:-                                                     

<form [formGroup]="form" (submit)="signIn()">
    <ion-grid>
        <ion-row>
            <ion-col>
                 <ion-item>
                    <ion-label color="primary" floating>Email</ion-label>
                    <ion-input [formControl]="form.controls['email']"></ion-input>
                  </ion-item>

                  <p *ngIf="form.controls['email'].errors && form.controls['email'].dirty" class="danger" padding>Email is not valid.</p>

            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list padding>
        <ion-item>
            <button ion-button default item-end color="light" (click)="cancel()">CANCEL</button>
            <button ion-button default item-end color="next" [disabled]="!form.valid" (click)="next()">NEXT</button>
        </ion-item>
    </ion-list>
</form>