common error validation message in ionic angular

Issue

I have implemented common error message in ionic 5 similar to this Common error

But when form loads am getting below error

Please let me know what i made the mistake..

EDIT :

My htmls class

<form [formGroup]="transactionForm" (ngSubmit)="SaveTransaction()" novalidate>

    
    <ion-item lines="full">
      <ion-label position="floating">Customer Id</ion-label>
      <ion-input formControlName="customerNo" type="text" required></ion-input>
    </ion-item>
    <ar-validation-message [control]="transactionForm.controls.customerNo">
    </ar-validation-message>

</form>

EDIT:

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from 'src/app/services/validation.service';

@Component({
  selector: 'ar-validation-message',
  template: '<span *ngIf="errorMessage!== null" class="error ion-padding" >{{errorMessage}}</span>'
})
export class ValidationMessageComponent {
  @Input() control: FormControl;

  constructor(private validationService: ValidationService) {
  }

  get errorMessage() {
    if (this.control.errors) {
      for (let propertyName in this.control.errors) {
        if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
          return this.validationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
        }
      }
    }

    return null;
  }
}

Solution

Check below things:

Have you declared the ValidationMessageComponent in SharedModule and exported it?

Have you imported the SharedModule in the module use it.

Answered By - huan feng