Angular string and number validation error

Question

<mat-form-field>
    <input matInput placeholder="Protokol Detayı" type="text" required="true" name="detail" id="detail"
                                    #detail="ngModel" ngModel required>
</mat-form-field>
<mat-error *ngIf="detail.touched && detail.invalid">
    <div *ngIf="detail.errors.required">Bu alanı boş geçemezsiniz.</div>
</mat-error>

I want to show an error if the input gets number instead of letters. But I could not manage to do it. I think I am right in writing the type of the input.

Answer 1

There are two ways you could achieve this. 1] Do not allow numbers to be entered in the input box. Display no errors 2] use pattern attribute on input and display errors when the entered text does not match the input for example the following pattern will take only alphabets and will give error when the user enters numbers.

<mat-form-field>
        <input matInput placeholder="Protokol Detayı" type="text" required="true" name="detail" id="detail"
                                    #detail="ngModel" [pattern]="[a-zA-Z]+$" ngModel required>
    </mat-form-field>
    <mat-error *ngIf="detail.touched && detail.invalid">
        <div *ngIf="detail.errors.required">Bu alanı boş geçemezsiniz.</div>
        <div *ngIf="detail.errors.pattern">numbers not allowed.</div>

    </mat-error>