问题产生的原因是动态绑定的表单控件的值没有正确地设定初始值,因此在初始化时返回了null。解决方法是在组件的构造函数中使用FormControl和setValue方法来设置表单控件的初始值。示例如下:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
`
})
export class FormComponent {
myForm: FormGroup;
name: string = 'firstName';
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
[this.name]: new FormControl('John')
});
// Or you can use this to set value
this.myForm.get(this.name)?.setValue('John');
}
}