角度6按enter键添加输入[关闭]

Reactive Forms FormArray . 你会附上 (keyup) 或 (keyup.enter) 处理程序到 <input /> . 在此处理程序中 keyup 事件,我们推一个新的 FormControl 到 FormArray . 本例使用 FormBuilder 生成一个 FormGroup 包含 FormArray 用钥匙 things . 我们使用 push 方法 添加新的 窗体控件 / AbstractControl 在keyup的处理程序中。

组成部分:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
    
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  myForm: FormGroup;
    
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
    
    
  onEnter() {
    this.addThing();
  }
    
  get things() {
    return this.myForm.get('things') as FormArray;
  }
    
  private createForm() {
    this.myForm = this.fb.group({
      things: this.fb.array([
        // create an initial item
        this.fb.control('')
      ])
    });
  }
    
  private addThing() {
    this.things.push(this.fb.control(''));
  }
}

模板:

<form [formGroup]="myForm">
    <div formArrayName="things">
        <div *ngFor="let thing of things.controls; let i=index">
            <label [for]="'input' + i">Thing {{i}}:</label>
            <input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)="onEnter()"  />
        </div>
    </div>
</form>

在非常基本的级别上,可以使用 controls 各自的财产 格式阵列 元素和使用 value 属性:

<ul>
  <li *ngFor="let thing of things.controls">{{thing.value}}</li>
</ul>

这是一个 StackBlitz

声明数组“inputs”并用值1初始化它。

inputs = [1];

addInput() {
  this.inputs.push(1);
}

HTML格式

<div id="testo" class="offset-1 text-center" *ngFor="let more of inputs">
<input type="text" class="col-8 text-center" (keyup.enter)="addInput()">
</div>

在模板中,每次按enter键(keyup.enter)时都将调用addInput()函数。该函数将一个新值推入数组,数组长度增加1,从而创建一个新的输入字段。

我看到很多人使用keyup.enter或keydown.enter,但最合适的是keypress.enter

<input type="text" [(ngModel)]="reference_num" class="form-control" placeholder="Type Reference number" name="reference_num" (keypress.enter)="search()">

您可以在angular 6、angular 7、angular 8和angular 9应用程序中轻松使用keydown事件。

.html文件

<input type="search" (keydown.enter)="onKeyDownEvent($event)" />

@Component({
  selector: 'my-app',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']

})
export class MyComponent {

  
  constructor(private router: Router,
              private route: ActivatedRoute) { }

  onKeyDownEvent(event: any) {
    this.router.navigate(['search-result'], { relativeTo: this.route });
    ...logic

  }
}

请注意,我们需要以编程方式在.ts文件中导航到其他路由,而不是在带有routerLink=“/search result”的html文件中。我们需要注入Router和ActivatedRoute类,以便从当前路由导航到/搜索结果路由。