common error validation message in ionic angular

Question

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

Same code works in angular project..this is another ionic project..same code should work no? — Lajith
– Lajith, Commented Nov 29, 2020 at 1:15

Useme Alehosaini · Accepted Answer · 2020-11-29 07:05:38Z

2

Check below things:

Have you declared the ValidationMessageComponent in SharedModule and exported it?

Have you imported the SharedModule in the module use it.

edited Nov 29, 2020 at 7:05

Useme Alehosaini

3,1266 gold badges22 silver badges28 bronze badges

answered Nov 29, 2020 at 1:50

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lajith Over a year ago

Thanks. I have 2 projects for web and mobile...web I have used same in shared module with no issue .but ionic project I have directly added component to app.module which is not working..I have declared it in app.module..but errror showing

Collectives™ on Stack Overflow

common error validation message in ionic angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related