下面是一个使用Angular反应式表单动态构建数组值的示例代码:
在组件的HTML模板中,我们可以使用ngFor指令来迭代显示数组的值,并使用ngIf指令根据条件来隐藏或显示特定的值。当点击“添加项目”按钮时,将会动态地向数组中添加一个新的项目:
在组件的TypeScript代码中,我们需要构建并初始化表单控件和表单数组。当点击“添加项目”按钮时,我们需要通过调用push()
方法向数组中添加一个新的项目,并更新表单控件:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
items: this.fb.array([])
});
}
get items(): FormArray {
return this.form.get('items') as FormArray;
}
addItem(): void {
const item = this.fb.group({
name: ['']
});
this.items.push(item);
}
removeItem(index: number): void {
this.items.removeAt(index);
}
}
在上面的代码中,我们使用FormBuilder
来构建表单控件和表单数组。addItem()
方法在数组中添加一个新的项目,并将其作为表单控件。removeItem()
方法用于从数组中删除指定的项目。
这是一个基于迭代隐藏和显示值的Angular反应式表单动态构建数组值的示例解决方案。