问题描述: 在Angular动态表单中,当我改变FormControl的名称时,新名称被清除。
解决方法: 要解决这个问题,需要在表单控件的父组件中使用FormArray来动态添加和删除表单控件。在添加或删除表单控件时,遵循以下步骤:
创建一个FormArray对象,并在组件的构造函数中初始化它。
import { FormArray, FormControl, FormGroup } from '@angular/forms';
export class AppComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
controls: new FormArray([])
});
}
}
在模板中使用FormArray来动态添加和删除表单控件。
在组件中添加相应的添加和删除表单控件的方法。
import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
export class AppComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
controls: new FormArray([])
});
}
addControl() {
const controls = this.form.get('controls') as FormArray;
controls.push(new FormControl(''));
}
removeControl(index: number) {
const controls = this.form.get('controls') as FormArray;
controls.removeAt(index);
}
}
现在,当你添加或删除表单控件时,FormControl的名称不会被清除。