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