如何解决修补表单后,控件上的更改检测如何工作?
我想知道以下情况会发生什么:
我有一个带有以下控件的formGroup:
{
forename: new FormControl()
surname: new FormControl()
}
现在,我像这样跟踪控件“姓氏”的变化(仅作为示例):
this.formGroup.get('surname').valueChanges.subscribe(changes => {
if(this.formGroup.get('forename') == 'Max'){
this.formGroup.get('forename').disable();
}
})
最后,我像这样修补表单:
this.formGroup.patchForm({surname: 'Muster',forename: 'Max'});
是否将禁用控件“姓氏”?因为我不确定它是否会触发控件“姓”的更改,然后才能设置控件“姓”的值。因此,“姓”可能还没有“正确”值。
当试图触发确切的valueChanges事件时,我试图更好地理解,因为有时我会遇到问题,尽管应该设置值,但未设置。
我还想知道是否有可能等到对每个控件进行修补后再发出更改。
解决方法
原因:
valueChanges
的 surname
将在patchValue()
更新第一个属性后立即触发,因此您将获得null
作为forename
的值,并且条件this.formGroup.get('forename') == 'Max'
为false
。
解决方案1:
您可以整个subscribe()
的{{1}}至valueChanges
而不是单个控件,然后检查所需条件。像这样:
formGroup
解决方案2:
只需更改要更新的对象中道具的顺序,就可以使用代码获得所需的行为。像这样:
this.formGroup
.valueChanges // subscribe to all changes
.pipe(
filter(form => form.forename === 'Max') // check if 'forname' is 'Max'
).subscribe(
forename => this.formGroup.get('forename').disable() // disable control
);
,
这就是我最终要做的:
this.formGroup.get('surname').valueChanges.subscribe(changes => {
this.handleForenameControl();
})
this.formGroup.get('forename').valueChanges.subscribe(changes => {
this.handleForenameControl();
})
private handleForenameControl():void{
if(this.formGroup.get('forename') == 'Max'){
this.formGroup.get('forename').disable();
}
}
我知道这不是最干净的,并且我正在考虑不要再放置另一个valueChanges-Subscription,而是。
我的意思是,上面只是一个示例,我没有在项目中实际使用任何代码,因此该示例可能很糟糕。也许这仍然可以帮助某人。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。