使用来自父窗体的初始异步数据激发窗体有效事件-Angular Reactive窗体

Question

在我的项目中，我从父组件向子组件传递一些异步数据。在子组件中，我有一个表单，其初始数据来自父组件传递的数据。

子级中的表单最初没有任何数据。然而，由于数据来自父级，它开始有一些默认的数据集。

父组件

formDataFromParent;
async ngOnInit() {
await new Promise(resolve => setTimeout(resolve, 5000)); 
this.formDataFromParent = {name: 'John', age: 25};
}

子组件

@Input() formDataFromParent: any;
public dataForm: FormGroup;
constructor(private _formBuilder: FormBuilder) { }
ngOnInit(): void {
this._initializeForm();
this._setupListner();
}
_initializeForm() {
this.dataForm = this._formBuilder.group({
name: [this.formDataFromParent?.name, [Validators.required]],
age: [this.formDataFromParent?.age, [Validators.required, Validators.min(10), Validators.max(50)]]
});
}
_setupListner() {
this.dataForm.statusChanges.pipe(filter(() => this.dataForm.valid))
.subscribe(() => alert('Form is valid'));
}
ngOnChanges(changes: SimpleChanges) {
if (changes.formDataFromParent) {
this._initializeForm();
this._setupListner();
}
}

(注意，在将数据传递给子级之前，我添加了一个超时。实际情况是，父级从后端获取一些数据，然后传递。(

现在这个实现工作了。但我需要在数据设置为表单后立即捕获from valid事件。在这种情况下，该事件不会触发。当仅在模板中的表单字段中键入数据时，它就会触发。

这是天性/预期行为吗？如果是，有什么方法可以触发表单有效事件吗？

谢谢。。！

Stacklitz

Answer 1

您在表单准备好后注册侦听器，因此它不会触发，直到表单上发生另一个更改(当用户引入第一个更改时发生(。

您可以在设置数据后检查表单是否有效(在ngOnChanges或_initializeForm中(

类似于：

_setupListner() {
this.dataForm.statusChanges
.pipe(filter(()=> this.checkFormValid()))
.subscribe(() => this.actOnValidForm());
}
ngOnChanges(changes: SimpleChanges) {
if (changes.formDataFromParent) {
this._initializeForm();
if (this.checkFormValid()){
this.actOnValidForm();
}
this._setupListner();
}
}
private checkFormValid(): boolean {
return this.dataForm.valid;
}
private actOnValidForm() {
alert('Form is valid');
}

我已经将逻辑提取为两个函数，使其可扩展，而无需重复检查\操作。

参见堆叠式