Para enviar un formulario en angular tenemos las siguientes opciones:
- Cree un botón para enviar el formulario.
- Asigne una clave para enviar el formulario
- O podemos hacer ambas cosas.
En este tutorial, veremos cómo utilizar una clave específica (Intro en este caso) para enviar un formulario.
Acercarse:
Podemos usar el evento angular keydown para usar la tecla Enter como nuestra clave de envío.
- Agregue la directiva keydown dentro de la etiqueta del formulario.
- Cree una función para enviar el formulario tan pronto como se presione Enter.
- Asigne el evento keydown a la función.
Ejemplo:
Vamos a crear un formulario que tenga tanto el botón como la tecla Intro como modo de envío del formulario.
- Usaremos clases de arranque, así que agregue scripts de arranque en su index.html.
html
<html lang="en"> <head> <meta charset="utf-8" /> <title>Tutorial</title> <!--add bootstrap script here--> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <script src= "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity= "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <app-root></app-root> </body> </html>
- código para el componente:
javascript
import { Component } from '@angular/core'; @Component({ selector: 'app-root', //here we used inline template format. template: ` <div style="text-align: center;"> <h1> {{title}} </h1> </div> <!--using keydown to assign the event to call EnterSubmit method--> <form #geeksForm="ngForm" (keydown)="EnterSubmit($event, geeksForm.form)" (ngSubmit)="submitit(geeksForm.form);"> <button class="btn btn-primary" [disabled]="!geeksForm.valid"> Submit </button> <input type="text" class="form-control" name="geek-name" ngModel #geekname="ngModel" required minlength="5" /> <div *ngIf="geekname.errors.required"> The geek name is required </div> <div *ngIf="geekname.errors.minlength"> The geek name should be at least {{ geekname.errors.minlength.requiredLength }} characters long </div> <select class="form-control" name="geek-type" ngModel #geeksField="ngModel" required> <option *ngFor="let geek of geeks" [value]="geek.id"> {{ geek.name }} </option> <div *ngIf="geeksField.touched && !geeksField.valid"> The category is required </div> `, styleUrls: [] }) export class AppComponent { title = 'Form submission tutorial'; public name = "geek"; geeks = [ {id: 1, name: "c++geek"}, {id: 2, name: "pythongeek"}, {id: 3, name: "javageek"}, {id: 4, name: "javascriptgeek"}, {id: 5, name: "angulargeek"} ]; /*assigning EnterSubmit function to keydown event and using Enter key to submit the form. */ //Function will take two parameters: //1.The key pressed. //2.form. EnterSubmit(event, form) { //keycode for Enter is 13 if (event.keyCode === 13) { alert('Enter key is pressed, form will be submitted'); //calling submit method if key pressed is Enter. this.submitit(form); } } //function to submit the form submitit(form){ console.log(form.value); alert("The form was submitted"); form.reset(); } } </select> </form>
Producción:
Publicación traducida automáticamente
Artículo escrito por vaibhav19verma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA