当我在输入字段中按Enter时，角度重定向

Question

我有以下带有输入字段的应用程序。当我键入并按Enter键时，该应用程序将转发到http://example.org/?。而不是触发onEnter事件。 onKey事件工作正常。如何阻止这种重定向发生？

这是html：

<mat-card>
  <form class="example-form">
    <mat-form-field class="example-full-width">
      <input matInput placeholder="How can I help" (keyup)="onKey($event)">
      <mat-icon matSuffix>?</mat-icon>
    </mat-form-field>
  </form>
</mat-card>

和ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  onKey(event) {
    console.log(event.target.value)
  }
}

Answer 1

检查按钮的类型，如果未指定任何类型，则默认为type =“ submit”。

Answer 2

有时奇怪的行为来自我们无法猜测的来源。我认为上述所有问题都是正确的，其他地方的副作用也会导致此问题。检查诸如路由防护之类的内容...或父组件输入处理...

Answer 3

我最近遇到了同样的问题，不确定为什么会这样。为了解决这个问题，我不得不使用Angulars处理表单的方式。

在我的情况下，我使用了formbuilder：

export class SearchComponent implements OnInit {
  name = 'Angular 6';
  searchForm: FormGroup;

  constructor(private _fb: FormBuilder){  }
  ngOnInit(){
    this.searchForm = this._fb.group({
      'search':['']
    });
  }

  submit(){ 
    console.log(this.searchForm);
  }

  onKeyup($event){
    console.log($event)
  }
}


<mat-card>
  <form class="example-form" [formGroup]="searchForm" (ngSubmit)="submit()">
    <mat-form-field class="example-full-width">
      <input matInput placeholder="How can I help" fromControlName="search" (keyup)="onKeyup($event)">
      <mat-icon matSuffix>?</mat-icon>
    </mat-form-field>
  </form>
</mat-card>

Answer 4

您的表单正在提交旧的方式，可以通过在函数末尾添加return false;来避免这种情况。

onKey(event) {
  console.log(event.target.value)
  return false;
}

Answer 5

这也可能是由于app.module.ts中缺少FormsModule和HttpModule模块引起的。

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,// import FormsModule
    HttpModule,// import HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Answer 6

当您按Enter键时，表单正在提交。此行为是默认行为。根据定义，表格是可提交的。鉴于此，为您的表单注册一个提交处理程序，以控制表单的提交意味着什么。

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {
  onSubmit() {

  }
  onKey(event) {
    console.log(event.target.value)
  }
}

现在，在您的模板中

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