57

我调用了组件text-editor.component，这是我的 html 模板：

<div class="container">

<div id="testo" class="offset-1 text-center" >
  <input type="text" class="col-8 text-center">
 </div>
</div>

当我按下回车键时，我想添加一个新的输入文本。这就是我想要实现的目标：

<div id="testo" class="offset-1 text-center" >
  <input type="text" class="col-8 text-center">
  <!-- second input -->
  <input type="text" class="col-8 text-center">
 </div>
</div>

当用户在输入中输入文本后按回车键时，应该会产生一个新的输入。我正在使用 Angular 的模板驱动表单。

4

4 回答 4

76

您可以使用Reactive Forms FormArray来解决这个问题。您可以将(keyup)or(keyup.enter)处理程序附加到<input />. 在此keyup事件的处理程序中，我们将一个新FormControl的推送到FormArray. 此示例使用FormBuilder生成一个FormGroup ，该 FormGroup包含一个FormArray，其键为things。我们使用push方法在 keyup 的处理程序中FormArray添加一个新的FormControl/ 。AbstractControl

零件：

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>

在一个非常基本的级别上，您可以使用相应元素的controlsFormArray属性和使用value属性的值循环遍历表单数组中的每个元素：

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

这是一个演示功能的StackBlitz。

于 2018-09-17T21:35:07.463 回答
39

控制器

声明一个数组“输入”并将其初始化为 1。

inputs = [1];

创建一个函数 addInput()。

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>

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

于 2018-09-17T22:34:40.177 回答
10

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

当用户按下输入框字段时，触发角度组件的 onKeyDownEvent()。您可以使用 (keydown.enter) 属性作为调用函数。波纹管逻辑代码：

.html

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

.ts

@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 类，以便从当前路由导航到 /search-result 路由。

于 2021-02-12T19:16:30.197 回答
3

我看到很多人使用 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()">
于 2020-12-24T13:25:31.903 回答