<div #dataContainer class="infills form-group richtextbox textarea {{field.groupid}}" contentEditable="true" id="{{field.id}}" name="{{field.id}}"
*ngIf="(field.fieldtype=='textarea' && field.id!='COURTNAMEFULL' );"
[ngStyle]="{'position':'absolute','top':field.y+'px','left':field.x+'px','font-size':'12px','font-family':'Courier New','height':field.height+'px','width':field.width+'px','background':'#EEE'}"
[(ngModel)]="field.value" title="{{field.description}}"
(dblclick)="openFullRTE(field.id)"
(keypress)="_keyPress($event, field.pattern,field.id)"
(focusout)="field.htmlContent=CheckandPassData(dataContainer.innerHTML,field.pattern,dataContainer.innerText);"
[ngModelOptions]="{standalone: true}" (ngModelChange)="FieldCalculations(field.id,field.groupid)" >
</div>
Here, pattern validation is done at keypress event. I need to show a small bootstrap tooltip(as:"enter only in digits") when the pattern is not matched.
What I have tried:
Created a span to show warning message if pattern is wrong. Created using alert class in bootstrap like below:
<span *ngIf="warningFlag===true && field.id===fid" class="alert alert-warning fade in" [ngStyle]="{'position':'absolute','top':(field.y-50)+'px','left':(field.x-20)+'px','z-index': 1}">
Only digits are allowed!
</span>