Question

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

a），我希望用户输入 html 标记或 javascript < / strong>事件。

b）而不是警告错误消息，我想在 span标签内显示错误消息（也许添加一个元素）

有人能指出我正确的方向吗？提前非常感谢！

这是我的工作代码：

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

Answer 1

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

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

传递或不传递组件应该通过组件实例完成，但是angular表示动态组件只能通过服务进行通信，这是可以做到的。但是对您的实时示例所做的更改却可以正常使用：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;

    }
  }

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

1 个答案: