要从Angular表单组中移除最后一个数组,您可以使用表单组的removeAt方法。以下是一个示例解决方案:
在组件类中定义一个表单组,并添加一些初始数组:
import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
// 初始化表单组
this.myForm = this.fb.group({
myArray: this.fb.array([
this.createItem('Item 1'),
this.createItem('Item 2'),
this.createItem('Item 3')
])
});
}
// 创建表单项
createItem(value: string): FormGroup {
return this.fb.group({
name: [value, Validators.required]
});
}
// 移除最后一个数组
removeLastItem() {
const arrayControl = this.myForm.get('myArray') as FormArray;
arrayControl.removeAt(arrayControl.length - 1);
}
}
在模板中,您可以使用*ngFor迭代表单组中的数组,并使用按钮调用removeLastItem方法:
这样,当用户点击按钮时,最后一个数组将从表单组中移除。