CODEWITHSUNDEEP
angularvalidationinputangular-material
Alexandre Bueno
Alexandre Bueno

Reputation: 19

Exclamation Mark on Input Angular Material

Is it possible show an Exclamation mark when input is invalid?

Like this

enter image description here

I didn't find this on Angular Material documentation.

Upvotes: 0

Views: 4726

Answers (1)

BatshevaRich
BatshevaRich

Reputation: 568

You can use matsuffix, Prefix & Suffix in Angular Material

<mat-form-field>
    <mat-hint>name</mat-hint>
    <mat-icon matSuffix><i class="fa fa-exclamation-circle" style="color: red;" aria-hidden="true"></i></mat-icon>
// add logic when to display the exclamation circle
    <input matInput placeholder="enter name" required>
</mat-form-field>

I used a fontawesome icon, but you can add your icon or css styled exclamation mark. Obviously, you need to add logic for when to display the error. Good Luck!

Upvotes: 1

Related Questions