如何在使用Angular 9按下Enter时提交表单？

要提交有角度的表单，我们有以下选择：

1. 创建一个按钮以提交表单。
2. 分配密钥以提交表格
3. 或者我们都可以做。

在本教程中，我们将看到如何使用特定键(在本例中为Enter)提交表单。

方法：

我们可以使用angular keydown事件将Enter键用作我们的提交键。

• 在form标签内添加keydown指令。
• 创建一个函数，一旦按下Enter键就提交表单。
• 将keydown事件分配给该函数。

例子：

让我们创建一个同时包含按钮和Enter键的表单作为表单提交方式。

• 我们将使用引导程序类，因此在您的index.html中添加引导程序脚本。

html

    
        
        Tutorial
 
        
        
       
        
        
        
    
    
        
    

• 该组件的代码：

javascript

import { Component } from '@angular/core';
@Component({ selector: 'app-root',
//here we used inline template format. template: `
 

    

        {{title}}
    

 

 

   
    
      Submit
  
    
   
    

        The geek name is required
    
    

The geek name should be at least {{
      geekname.errors.minlength.requiredLength }} characters long
    
    
        
            {{ geek.name }}
        
        

            The category is required
        
 
`, 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(); } }
    

输出：