在Angular的FormBuilder中,当通过JavaScript动态添加HTML元素时,元素的值可能无法应用。这是因为FormBuilder是在组件初始化时构建表单模型的,它不会自动更新动态添加的元素。
为了解决这个问题,可以使用以下方法:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
dynamicElements: this.formBuilder.array([]),
});
// 添加动态元素
const control = new FormControl('initial value');
this.dynamicElements.push(control);
}
get dynamicElements() {
return this.myForm.get('dynamicElements') as FormArray;
}
}
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent implements OnInit {
myForm: FormGroup;
dynamicElements: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
dynamicElements: this.formBuilder.array([]),
});
// 添加动态元素
const control = this.formBuilder.control('initial value');
this.dynamicElements.push(control);
}
get dynamicElements() {
return this.myForm.get('dynamicElements') as FormArray;
}
}
以上两种方法都可以实现在通过JavaScript动态添加HTML元素时应用元素值。根据具体的需求和使用场景,选择适合的方法来解决问题。