在Angular 9中,要重置表单到原始状态,可以使用reset()
方法。如果一个字段是一个数组,可以使用FormArray
来表示它。下面是一个包含代码示例的解决方案:
首先,在组件的类中创建一个FormArray
来表示数组字段。假设数组字段的名称是myArrayField
,可以这样定义:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myArrayField: this.formBuilder.array([])
});
}
// 获取 myArrayField 的表单数组控件
get myArrayField() {
return this.myForm.get('myArrayField') as FormArray;
}
// 添加一个新的数组项
addArrayItem() {
this.myArrayField.push(this.formBuilder.control(''));
}
// 删除一个数组项
removeArrayItem(index: number) {
this.myArrayField.removeAt(index);
}
// 重置表单到原始状态
resetForm() {
this.myForm.reset();
}
}
然后,在模板中使用FormArray
来显示和操作数组字段。例如,可以使用*ngFor
指令来遍历数组项,并使用formArrayName
和formControlName
指令来与表单控件绑定。以下是一个示例模板:
在上面的示例中,addArrayItem()
方法用于添加一个新的数组项,removeArrayItem()
方法用于删除一个数组项,resetForm()
方法用于重置整个表单到原始状态。
这样,当点击“重置”按钮时,表单将被重置到原始状态,包括数组字段。