Angular 6在回车键上添加输入

Question

我有一个名为 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 的模板驱动表单。

Answer 1

您可以使用 Reactive Forms FormArray 来解决这个问题.你会附上一个 (keyup)或 (keyup.enter) <input /> 的处理程序.在这个 keyup 的处理程序中事件，我们推送一个新的FormControl到 FormArray .此示例使用 FormBuilder生成 FormGroup包含 FormArray key 为 things .我们使用 push FormArray的方法|添加一个新的 FormControl/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 遍历表单数组中的每个各自的属性(property) FormArray元素和值使用 value属性:

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

这是一个StackBlitz演示功能。