CODEWITHSUNDEEP
angulartypescriptangular-material
Mr-Programer
Mr-Programer

Reputation: 561

mat-error not shown in angular material field

I want to show error in form. I'm using the angular material input :

<mat-form-field appearance="fill" class="phone-num">
    <input [placeholder]="'PROFILE.MOBILE_NUMBER' | translate" class="pointer" type="text" matInput
        [(ngModel)]="phoneNumber" (keyup)="onPhoneNumberChange()" [readonly]="isReadOnly" id="phoneNumberInput">

    <mat-error *ngIf="f.mobileNumber.hasError('validCountryPhone')"
        [translate]="'SHARED_VALIDATE.NOT_VALID_PHONENUMBER'"
        [translateParams]="{ value: 'PROFILE.MOBILE_NUMBER' | translate }">
    </mat-error>
</mat-form-field>

when input is not valid, it's not showing error, but when I change mat-error to div it shows that error .

whats the problem ?how can i solve this problem /???

Upvotes: 0

Views: 3557

Answers (1)

antoineso
antoineso

Reputation: 2151

After some research I found this article explaining that:

We can learn from this that only when the form-field (the control) says it has errors, it displays the mat-error using a transclusion.

So we can suppose that mat-error need a formControl to check if formField has error. in your code you will need to add in the input :

 <mat-form-field appearance="fill" class="phone-num">
    <input [placeholder]="'PROFILE.MOBILE_NUMBER' | translate" class="pointer" type="text" matInput
        [(ngModel)]="phoneNumber" (keyup)="onPhoneNumberChange()" [readonly]="isReadOnly" id="phoneNumberInput" [formControlName]="mobileNumber"> 

    <mat-error *ngIf="f.mobileNumber.hasError('validCountryPhone')"
        [translate]="'SHARED_VALIDATE.NOT_VALID_PHONENUMBER'"
        [translateParams]="{ value: 'PROFILE.MOBILE_NUMBER' | translate }">
    </mat-error>
</mat-form-field>

supposing your formControl's name is mobileNumber.

Upvotes: 1

Related Questions