Intercettare il tasto ENTER in Angular

Mattepuffo's logo
Intercettare il tasto ENTER in Angular

Intercettare il tasto ENTER in Angular

In pratica in una casella di input, in un progetto Angular, dobbiamo intercettare il tasto ENTER.

In verità la cosa è molto semplice utilizzando uno degli event binding messi a disposizione; nello specifico keyup.enter.

Quindi lato HTML:

<form [formGroup]="frm">
	<label>Articolo</label>
	<input type="text" formControlName="sca_articolo" pInputText autofocus
		   (keyup.enter)="addArticolo()">
</form>

Poi lato Typescript:

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
    selector: 'app-scarico',
    templateUrl: './scarico.component.html',
    styleUrls: ['./scarico.component.scss']
})

export class ScaricoComponent implements OnInit {

    frm: FormGroup;

    constructor() { }

    ngOnInit(): void {
        this.creaForm();
    }

    creaForm(): void {
        this.frm = new FormGroup({
            sca_articolo: new FormControl('TEST', Validators.required)
        });
    }

    addArticolo(): void {
        const articolo = this.frm.get('sca_articolo').value;
        console.log(this.frm.value);
    }

}

Non ho messo controlli sul valore della input.

Enjoy!


Condividi su Facebook

Commentami!