添加span元素以显示错误消息

亨利·戴夫

我在字段上使用指令,以防止用户输入html标签和javascript事件,但是我遇到了两个问题:

a)我希望能够在用户输入html标记或javascript事件后立即显示错误消息

b)我不是要警告错误消息,而是要span标签显示错误消息(也许添加一个元素)。

谁能指出我正确的方向?在此先多谢!

这是我的工作代码:

现场演示

@HostListener('keyup',['$event'])
   onkeyup(event:any){

   if (this.control.control.value.match(/<script.*?>.+<\/script>/i)) {
       alert('HTML script tags are not allowed.');
       }
   else if(this.control.control.value.match(/<\/?\w+ +[^>]*on[a-z]+=["'].+["'][^>]*>/gi)){
    alert('HTML event handlers are not allowed.');
   }
 }
努诺·索萨(Nuno Sousa)

您需要为额外的跨度添加自定义组件。添加dom元素需要在良好的角度习惯中使用结构指令:* directive

该结构指令不会直接引用您在其中应用该元素的元素,而是将其用作包装器,因此您需要使用native元素来获取对下一个同级元素的引用。

传递或不传递组件应该通过组件实例来完成,但是角度表示动态组件只能通过服务进行通信,而您可以这样做。但对您的实时示例所做的更改可以正常工作:https : //stackblitz.com/edit/primeng-dropdown-automation-84vitx

当然,您应该在.module中声明组件,并将自定义错误组件声明为入口组件,以便可以动态加载它们。

@Component({template:`<span *ngIf="show">No script tags please</span>`})
export class NoScriptComponent{
  public show = false;
};
@Component({template:`<span *ngIf="show">No html tags please</span>`})
export class NoHtmlComponent{
  public show = false;
};
@Directive({
  selector: '[customTextField]'
})
export class CustomDropDownDirective {
 const htmlError;
 const jsError;
  @Output() updateProperty: EventEmitter<any> = new EventEmitter();
  constructor(private el: ElementRef, private template: TemplateRef<any>, private cfr: ComponentFactoryResolver, private vcr: ViewContainerRef) {
   }

  ngOnInit() {
    this.vcr.createEmbeddedView(this.template)
    const next = this.template.elementRef.nativeElement.nextElementSibling;

      next.onkeyup = this.onkeyup.bind(this);
      const cmpJsFactory = this.cfr.resolveComponentFactory(NoScriptComponent);
      this.jsError = this.vcr.createComponent(cmpJsFactory)
      const cmpHtmlFactory = this.cfr.resolveComponentFactory(NoHtmlComponent);
      this.htmlError = this.vcr.createComponent(cmpHtmlFactory)

  }

    onkeyup(event:any){
    const value = event.target.value;
    if (value.match(/<script.*?>.+<\/script>/i)) {
      this.jsError.instance.show=true;


        }
    else if(value.match(/<\/?\w+ +[^>]*on[a-z]+=["'].+["'][^>]*>/gi)){
      this.htmlError.instance.show=true;
    } else {
            this.jsError.instance.show= false;
            this.htmlError.instance.show= false;

    }
  }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章