0
381
ViewsEl patrón de forma reactiva angular no funciona
Estoy usando Reactive Form en Angular para poder usar tanto números como comas. Hice el texto de tipo de entrada para que aparezcan puntos y comas en el teclado en la vista móvil. Quiero que la entrada ingresada acepte solo números, pero el patrón que ingresé no ayudó. Todavía puedo ingresar caracteres después de hacer esto, pero no quiero que eso suceda.
textInput: new FormControl('', [ Validators.required, Validators.pattern('[0-9]{7}') ]), <input autoComplete="off" autoCorrect="off" type="text" lang="en" [formControl]="this.config.textInput" placeholder="0.0" minLength={1} maxLength={79} spellCheck="false" (ngModelChange)="amountChanged($event)" enterkeyhint="next" step="1" class="w-100" >¿Cómo puedo hacer que el tipo sea texto y solo acepte números?
3 answers
Answer question0
Puede usar el tipo de entrada: número, por ejemplo:
<input autoComplete="off" autoCorrect="off" type="number" lang="en" [formControl]="this.config.textInput" placeholder="0.0" minLength={1} maxLength={79} spellCheck="false" (ngModelChange)="amountChanged($event)" enterkeyhint="next" step="1" class="w-100">0
Puede actualizar el siguiente patrón para validar su campo de entrada.
textInput = new FormControl("", [ Validators.required, Validators.pattern("[0-9]*") ]); [0-9]* esto puede funcionar para usted.
He agregado un enlace de demostración y una captura de pantalla debajo de mi ejemplo:
Por favor revise y comparta sus comentarios.
Gracias.
0
Puedes crear una directiva para ello como
@Directive({ selector: '[only-number]', }) export class OnlyNumberDirective implements OnInit { constructor() {} ngOnInit() {} @HostListener('input', ['$event']) inputEvent(event: KeyboardEvent) { const input = event.target as HTMLInputElement; input.value = input.value.replace(/[^\d]+/g, ''); } }declarar en modulo
declarations: [AppComponent, OnlyNumberDirective],Usar
<input type="text" only-number />