Показать небольшую всплывающую подсказку (bootstrap) в качестве проверки, если шаблон не соответствует в angular 2
<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>
Здесь проверка шаблона выполняется при нажатии клавиши. Мне нужно показать небольшую всплывающую подсказку bootstrap (например:" введите только цифры"), когда шаблон не совпадает.
Что я уже пробовал:
Создал промежуток, чтобы показать предупреждающее сообщение, если шаблон неверен. Создан с использованием класса alert в bootstrap, как показано ниже:
<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>