如果模式在角度2中不匹配，则显示小工具提示（bootstrap）作为验证 [英] To show small tooltip(bootstrap) as validation if the pattern is not matched in angular 2

问题描述

< div #dataContainer class =infills form-group richtextbox textarea {{field.groupid}}contentEditable =trueid ={{field.id}}name = {{field.id}}
 * ngIf =（field.fieldtype =='textarea'&& field.id！='COURTNAMEFULL'）; 
 [ngStyle] ={'position'：'绝对'，'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.valuetitle ={{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> 

此处，模式验证在keypress事件中完成。当模式不匹配时，我需要显示一个小的bootstrap工具提示（如：仅输入数字）。



我尝试过：



如果模式错误，创建一个显示警告消息的范围。使用如下引导程序中的警报类创建：

< span * ngIf =warningFlag === true&& field.id === fidclass =警告警告 - 警告淡入[ngStyle] ={'position'：'绝对'，'top':( field.y-50）+'px'，'left':( field.x-20）+' px'，'z-index'：1}> 
 仅允许数字！ 
< / span> 

解决方案

事件，field.pattern，field.id）
（focusout）=field.htmlContent = CheckandPassData（dataContainer.innerHTML，field.pattern，dataContainer.innerText）;
[ngModelOptions] ={standalone ：true}（ngModelChange）=FieldCalculations（field.id，field.groupid）>
< / div>

这里，模式验证是在keypress事件中完成的。当模式不匹配时，我需要显示一个小的bootstrap工具提示（如：仅输入数字）。



我尝试了什么：



如果模式创建了一个显示警告消息的范围是错误的。使用下面的bootstrap中的alert类创建：

< span * ngIf =warningFlag === true&& field.id === fidclass =alert alert-warning淡入[ngStyle] ={'position'：'absolute'，'top':( field.y-50）+'px'，'left ':( field.x-20）+'px'，'z-index'：1}> 
 只允许数字！ 
< / span> 

<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>

解决方案

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>

这篇关于如果模式在角度2中不匹配，则显示小工具提示（bootstrap）作为验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！