Estoy tratando de escribir un validador personalizado para verificar si un tipo de contenido de URL determinado es pdf, doc o docx. Si la URL no es una de estas, el usuario no debería poder guardar.

En mi componente tengo:

 checkUrl(): ValidatorFn { return (control: AbstractControl): { [key: string]: boolean } | null => { const validFiles = [ 'application/msword', 'application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', ] const url = control.value.toLowerCase() const xhttp = new XMLHttpRequest() xhttp.open('HEAD', url) xhttp.onreadystatechange = function() { if (this.readyState == this.DONE) { console.log(this.status) if (!validFiles.includes(this.getResponseHeader('Content-Type')!)) { console.log('Match') return { notValid: { value: control.value } } } } } xhttp.send() return null }

tambien tengo

 url: [ '', [ Validators.required, Validators.pattern( '(http://www.|https://www.|http://|https://)?[a-z0-9]+([-.]{1}[a-z0-9]+)*.[az]{2,5}(:[0-9]{1,5})?(/.*)?$' ), this.checkUrl(), ], ],

Y

 formControlName="url" type="url" pattern="(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[az]{2,5}(:[0-9]{1,5})?(\/.*)?$"

en el HTML.

Ahora, cuando ingreso el 77677 en la URL, aparece el error de que no es una URL. Sin embargo, si ingreso https://www.google.com , se acepta lo cual no debería ser ya que no es un archivo pdf, doc o docx. Solo si el usuario ingresa una URL que es un pdf, doc o docx que estoy verificando por tipo de contenido, se le permitirá guardar.

Por lo que puedo decir, esto debería funcionar, pero no es así y no puedo ver lo que estoy haciendo mal.