Reuní una directiva de atributo de moneda en un FormControl ReactiveForm que usa @HostListener en un evento de entrada (onKeyDown) para eliminar todos los caracteres no válidos (letras y símbolos) a medida que se escriben en la entrada, pero permite números y decimales. PERO , si escribe un carácter no válido (es decir, a ) en un campo de entrada vacío y la directiva lo elimina, el modelo no se actualiza.

He agregado una configuración de plunker usando la directiva de moneda. Pasos a seguir para entender mi pregunta:

1. escriba 123a , no obtiene una a en la entrada porque no se permiten letras, y el botón está deshabilitado porque el formulario no es válido (bien)
2. escriba 123.456 no obtiene un 6 en la entrada ya que solo se permiten 2 decimales, y el botón está deshabilitado ya que el formulario no es válido (bueno)
3. escriba a , no obtiene una a en la entrada, PERO el trasero está habilitado ya que el modelo cree que tiene a a aunque la interfaz de usuario no lo muestre (malo)

Puede verificar que el modelo no se actualice haciendo clic en el botón y mirando en la consola, que registra this.form.value y muestra { amount: 'a' } . Si escribe un carácter válido a continuación, el modelo solo contendrá ese a y se habrá eliminado. Entonces, solo en este caso, el modelo no se actualiza correctamente.

Este fue un problema que se resolvió fácilmente en AngularJS usando ngModel validator and parser pipes , modelValue , $setViewValue y $render() para actualizar y forzar a AngularJS a ejecutar $digest. ¿Cómo haces esto en Angular?

Este es un fragmento de mi directiva de atributos que elimina los caracteres no deseados con éxito:

 @HostListener('input', ['$event']) onKeyDown(event: KeyboardEvent) { const input = event.target as HTMLInputElement; // Only numbers and decimals let trimmed = input.value.replace(/[^\d\.,]+/g, ''); // Only a single decimal and choose the first one found if (trimmed.split('.').length > 2) { trimmed = trimmed.replace(/\.([^\.]*)$/, '$1'); } // Cannot start with decimal typed or pasted if (trimmed.indexOf('.') === 0) { trimmed = ''; } // AngularJS "like" solution would be something like: // ngModelCtrl.$setViewValue(trimmed); // ngModelCtrl.$render(); // Angular solution is??? input.value = trimmed; }