在Angular 7中,可以使用FormBuilder和FormArray来动态创建响应式表单,并选择在FormArray中的位置。下面是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
items: this.fb.array([])
});
// 添加初始项到FormArray
this.addItem();
}
get items(): FormArray {
return this.form.get('items') as FormArray;
}
addItem() {
const item = this.fb.group({
name: '',
quantity: 0
});
this.items.push(item);
}
removeItem(index: number) {
this.items.removeAt(index);
}
}
在这个例子中,我们使用FormBuilder创建了一个FormGroup和一个FormArray,并初始化了一个初始项。通过在模板中使用formArrayName和formGroupName指令,我们可以迭代FormArray中的项,并使用formControlName指令绑定每个项的表单控件。addItem和removeItem方法用于添加和删除FormArray中的项。
这样,你就可以选择在FormArray中的位置添加和删除项了。