angular动态添加表单
时间: 2023-08-23 07:04:42 浏览: 50
在Angular中动态添加表单可以使用FormGroup和FormArray。FormGroup用于表示一个表单组,而FormArray用于表示一个表单数组。下面是一个示例:
首先在组件中定义FormGroup:
```
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
<form [formGroup]="myForm" (submit)="onSubmit()">
<div formArrayName="items">
<div *ngFor="let item of items.controls; let i=index" [formGroupName]="i">
<input type="text" formControlName="name">
</div>
</div>
<button type="button" (click)="addItem()">Add Item</button>
<button type="submit">Submit</button>
</form>
`,
})
export class AppComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
items: new FormArray([])
});
}
get items() {
return this.myForm.get('items') as FormArray;
}
addItem() {
this.items.push(new FormGroup({
name: new FormControl('')
}));
}
onSubmit() {
console.log(this.myForm.value);
}
}
```
在模板中,我们使用formArrayName指令来表示一个FormArray,然后使用*ngFor指令来为每个表单项创建一个FormGroup。在addItem方法中,我们向FormArray添加一个新的FormGroup。
这样我们就可以使用addItem方法动态添加表单项了。