我的页面中有这么多形式的不同组件,还有一个清除按钮(来自父组件),它基本上只清除表单的所有输入字段。我一直在坚持如何将子组件的FormGroup传递给父组件,以便可以从父组件重置那些表单。
答案 0 :(得分:0)
1)您需要EventEmitter,您可以在子组件中初始化表单组并将其发送到父父组件。
在您的子组件中:
export class TestComponent1Component implements OnInit {
// Crete EventEmitter
eventEmitter = new EventEmitter<FormGroup>();
myFormGroup: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.myFormGroup = this.fb.group({
someControl: new FormControl("TestValue"),
});
this.eventEmitter.emit(this.myFormGroup);
}
}
然后在您的父组件HTML中:
<app-test-component1 (eventEmitter)="eventListener($event)"></app-test-component1>
在您的父组件ts文件中:
export class AppComponent implements OnInit {
title = "AngularTestApp";
private childFormGroup: FormGroup;
constructor() {}
ngOnInit(): void {}
eventListener(formGroup: FormGroup) {
this.childFormGroup = formGroup;
}
}
2)另一种选择是使用ViewChild
在设置@ViewChild的父组件中,请注意,ViewChild在初始化视图之后可用:
export class AppComponent implements OnInit, AfterViewInit {
title = "AngularTest";
@ViewChild("childComponent", { static: false })
testComponent1Component: TestComponent1Component;
constructor() {}
ngOnInit(): void {}
ngAfterViewInit(): void {
console.log(this.testComponent1Component.myFormGroup);
}
}
在您的父html中:
<app-test-component1 #childComponent></app-test-component1>