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