I am trying to place a green tick in the e-mail input control after the successful validation of its content. Something like the following

        <label for="useremail">User E-mail</label>
        <input type="email" formControlName="useremail" 
            [ngClass]="{ 'is-invalid': submitted && f['password'].errors }" />
            <span *ngIf="submitted && myForm.valid">Tick</span>
            <span *ngIf="submitted && !myForm.valid">X</span>
        </div>

... but want to replace the word Tick with the green tick image(icon). Is there a simple way of displaying a green tick icon upon successful validation in the right upper corner of the angular control. I thought there is a bootstrap class that I add to control that would a trick - I spent hours on internet without any success.

CodePudding user response：

Yes, simple way is to use any icon library and theme color class which can help easily to add gree tick icon. <i ></i>. [Bootstap icons link] https://icons.getbootstrap.com/icons/check/ But i would rather prefer a toast library to show a message. And prefer to use primeng toast library [Link] http://primefaces.org/primeng/toast