Angular : Renderer 2 , aplicando regra em todos os inputs da aplicação

[rubenmarcus]

Opa pessoal beleza? Eu to tentando implementar uma regra de apagar emojis de todos os input text, tel e text area da minha aplicação

primeiro fiz assim:

noEmoji(){
   document.querySelectorAll('input[type=tel], input[type=number],input[type=email], textarea').forEach( function (item) {
      item.addEventListener('keyup',(event) =>{
        let regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;    
        let itemVal = item.value;
        if(itemVal.match(regex)){
          item.value = '';
         }
       });
     });
    }

lendo no app.component.ts :
ngAfterViewInit() { this.noEmoji() }

Ele funciona em alguns componentes, e depois as vezes parece que esquece a regra.
No Modulo de Perfil ele chega a nem ler quando debugo pelo chrome.

Os Modulos Estão estruturados com lazy loading, e tem o

• app Module pai,
  • webview module
  • web module
    • auth module
    • user module (nessa não funciona)
    • mais uns 10 modulos..

Ai lendo sobre o renderer 2,
vi que dava pra fazer isso:

  ngAfterViewInit() {
    const inputElement = this.renderer.selectRootElement('input');
    let global = this.renderer.listen(inputElement, 'click', ( event ) => console.log('clicked'));
  }

só que ai dá esse erro:

ERROR Error: The selector "input" did not match any elements
    at DefaultDomRenderer2.selectRootElement (platform-browser.js:2805)

Vcs manjam como no componente pai eu pegar o evento dos inputs de todos os componentes filhos, e ai aplicar a regra de desabilitar emojis??

Agora só consigo pensar em criar uma classe de validação, e ai ir aplicando em cada form control dos componentes, mas isso é um trabalho braçal imenso, pois com certeza tem mais de 1000 controls na minha aplicação

[felipefialho]

Acho que o que está rolando é que ele funciona inicialmente com os módulos carregados e depois não é mais chamado quando você injeta novos módulos ao mudar de rota.

Tenta chamar essa função em cada mudança de rota, tipo assim (código generico, tá?):

constructor(private router: Router) { 
   this.router.events 
   .pipe(filter((event) => event instanceof NavigationEnd))
   .subscribe((event: NavigationEnd) => { 
      this.noEmoji();
   });
} 

[rubenmarcus]

@lfeh ele não funcionou no modulo de usuario mesmo com o router events..

fiz um metodo de validação e to aplicando campo a campo.. 120 componentes

export function noEmoji(control: AbstractControl){
      let regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;    
      let itemVal = control.value;
      if(itemVal.match(regex)){
        control.setValue('');
       }
  }