Question

在angular2中，你如何在表格输入框上进行ngEnter以便它调用一个函数？

我似乎无法让（keyup.enter）工作。如果我需要导入任何东西，也请告诉我。

这是我的表单：

<form autocomplete="off" class="bs-component padding-top-20" role="form" #form="ngForm">
                        <div class="form-group">

                            <input class="form-control" type="email" value="" name="EMAIL" placeholder="Email" [(ngModel)]="email" (keyup.enter)="test()" required />                
                        </div>

                        <a class="btn btn-default pink col-xs-12" type="submit" [routerLink]="['/register', {id: email}]">
                        JOIN</a>                                
                    </form>

这是我在组件中的功能：

  test = (): void => {
    console.log("test");
  }

Answer 1

您需要导入的唯一内容是FormsModule。这不应该阻止（keyup.enter）工作。值得的是，这对我有用（plunkr）：

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form>
     <input name="name" [(ngModel)]="form.name" (keyup.enter)="onEnter()">
     <pre>
{{ form | json }}
     </pre>
    </form>
  `,
})
export class App {
  form = {
    name: "name"
  };

  onEnter() {
    alert('Enter');
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 2

您可以像这样使用ngSubmit

<form (ngSubmit)="test()">

您的按钮可以是提交类型。

在angular2中，如何在表单输入框中执行ngEnter以便它调用函数

2 个答案: