Otimizando a validação de formulário angular com carga lenta

O carregamento lento é uma técnica usada para melhorar o desempenho de aplicativos da Web, carregando apenas o código e os recursos necessários quando necessário. Isso pode ser especialmente útil em aplicativos grandes e complexos, pois pode ajudar a reduzir o tempo de carregamento inicial e melhorar a experiência geral do usuário.

Recentemente precisei implementar um validador de endereço blockchain em um de nossos formulários. Minha pesquisa revelou uma antiga biblioteca de código aberto que poderia me ajudar com isso, mas seu tamanho era superior a 200kb. Não queria carregar tudo sem motivo, então criei um validador assíncrono que carrega a biblioteca somente quando preciso:

function addressValidator(): AsyncValidatorFn {
  return function (control) {
    return import('address-validator-package-name').then((m) => {
      return m.validate(control.value) ? null : { invalidAddress: true };
    });
  };
}

@Component({ ... })
export class FormComponent {
  addressControl = new FormControl('', {
    asyncValidators: addressValidator(),
  });
}

export const ADDRESS_VALIDATOR = new InjectionToken<AsyncValidatorFn>(
  'ADDRESS_VALIDATOR'
);

const addressValidator = {
  provide: ADDRESS_VALIDATOR,
  useFactory(): AsyncValidatorFn {
    const cdr = inject(ChangeDetectorRef);

    return (control) => {
      return import('address-validator-package-name').then((m) => {
        cdr.markForCheck();
        return m.validate(control.value) ? null : { invalidAddress: true };
      });
    };
  },
};
@Component({
  providers: [addressValidator]
})
export class FormComponent {
  addressControl = new FormControl('', {
    asyncValidators: inject(ADDRESS_VALIDATOR),
  });
}