代码之家 › 专栏 › 技术社区 › HenryDev

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

primeng typescript angular

2

HenryDev · 技术社区 · 6 年前

我在一个字段上使用一个指令来阻止用户进入 HTML 标签以及 javascript事件 但我面临两个问题:

a) 我想能够 显示错误消息 一旦用户进入 HTML 标签或 JavaScript 事件。

b) 而不是提醒我想要的错误消息 显示错误消息 里面 跨距标签 (可能添加元素)。

有人能给我指出正确的方向吗?.非常感谢!

这是我的工作代码:

LIVE DEMO

@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.');
   }
 }

1 回复 | 直到 6 年前

1

2

Nuno Sousa 6 年前

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

这个结构指令不直接引用应用它的元素,而是作为包装器工作,因此需要使用本机元素来获取对下一个同级的引用。

不管组件是否应该显示,传递都是通过组件实例完成的,不过角型的建议动态组件应该只通过服务进行通信,您可以这样做。但对您的现场示例的更改是有效的: https://stackblitz.com/edit/primeng-dropdown-automation-84vitx

当然,您应该在.module中声明组件,并将自定义错误组件声明为条目组件,以便可以加载dynamicaly。

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

    }
  }