我有一个名为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>

我想在按下enter键时添加新的输入文本.这就是我想要实现的目标:

<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>

当用户在输入文本后按enter键时,就会产生一个新的输入.我使用Angular的模板驱动表单.

推荐答案

您可以使用Reactive Forms FormArray来实现这一点.您可以将(keyup)(keyup.enter)处理程序连接到<input />.在此keyup事件的处理程序中,我们将新的FormControl推送到FormArray.此示例使用FormBuilder生成包含密钥为thingsFormArrayFormGroup.我们使用FormArraypush方法在keyup的处理程序中添加一个新的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>

在一个非常基本的级别上,您可以使用相应FormArray元素的controls属性和使用value属性的值来循环表单数组中的每个元素:

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

下面是一个演示功能的StackBlitz.

Angular相关问答推荐

Angular 17@在大小写时切换多个值

我如何更新此Ionic应用程序以解决路由问题?

如何在ANGLING v17中使用鞋带样式组件?

Angular router-outlet 未渲染

倒计时计时器,每10秒重新启动一次,共4次

Angular 17-getEnvironment InjectorProviders出现异常

Angular 单位测试表

Angular NG5002错误无效的ICU消息和意外字符EOF

如何在 Angular RxJS 中替换订阅中的 subscrib?

错误:服务或构建Angular 项目时模块构建失败

NGX-Translate如何不得到404?

Angular6:RxJS switchMap 运算符未按预期工作

Angular:为什么在 ngAfterContentInit 之后变量未定义?

如何从 RxJS 重试中排除某些 url

尽管模型中的变量发生了变化,但Angular 视图没有更新

如何设置Angular 4背景图片?

material Angular手风琴header/title高度

Angular 4 material表突出显示一行

RxJS - 发生错误时观察到的不会完成

如何在 Angular 2 中取消 HTTPRequest?