这是因为在组件被创建时,表单控件尚未初始化。解决此问题的一种方法是使用ngOnInit钩子初始化表单控件并在子组件中更改其值。以下是解决方法的代码示例:
// 父组件 import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-parent',
template:
})
export class ParentComponent {
myForm: FormGroup;
constructor() { this.myForm = new FormGroup({ name: new FormControl('') }); }
ngOnInit() { this.myForm.addControl('age', new FormControl('')); } }
// 子组件 import { Component, Input } from '@angular/core'; import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-child',
template:
})
export class ChildComponent {
@Input() formGroup: FormGroup;
changeAge() { this.formGroup.controls['age'].setValue('30'); } }
在这个示例中,父组件中的表单控件名称为“name”和“age”。父组件使用ngOnInit在控件中添加了一个控件“age”。子组件通过@ Input指令从父组件中获取formGroup对象,并在“changeAge”方法中更改“age”控件的值。请注意,在子组件中,我们使用this.formGroup.controls [key]获取表单控件。