To incorporate additional spans, it is recommended to include custom components. When adding DOM elements in Angular, it is best practice to utilize a structural directive such as *directive.
This particular structural directive acts as a wrapper and does not directly reference the applied element. Therefore, you must use the native element to access the next sibling.
Angular suggests that the visibility of components should be determined through a service for dynamic components communication. However, implementing changes in your live example can be achieved by following this link: https://stackblitz.com/edit/primeng-dropdown-automation-84vitx
Remember to declare these components in the .module file and mark the custom error components as entry components to enable dynamic loading.
@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;
}
}