5

我正在尝试将应用程序迁移到使用ChangeDetectionStrategy.OnPush. 但是，我在尝试使用一些反应形式时遇到了一些障碍。

我有一个可重用的控件，它根据一些状态标志（例如*ngIf="control.touched && control.invalid"）显示验证消息。我遇到的问题是无法检测touched标志何时更改，因此无法使用ChangeDetectorRef.

它可以通过监听click事件来引用输入元素本身来完成，但这并不能说明何时markAsTouched()使用，并且传递对元素的引用并不总是可能的，而且总是不雅的。

有没有一种方法可以使用OnPush并且仍然响应表单控件状态（例如touched），或者它只是通常很痛苦？

4

2 回答 2

1

你可以监听状态变化，然后调用markForCheck()更新视图：

constructor(changeDetectorRef: ChangeDetectorRef) {
  this.formGroup.statusChanges.subscribe(status => changeDetectorRef.markForCheck());
}

更新：由于我无法发表评论，因此我将更新此答案。

您对 statusChanges 的看法是正确的。当然你需要订阅 statusChanges，这是一个错误。

我想我们在这里错过了一点。在CheckOnce模式 (OnPush) 中，Angular 将在 DOM 事件（包括模糊）之后检查更改，因此应该更新视图并且您提到的消息 ( *ngIf="control.touched && control.invalid") 应该有效。

但是，如果您调用markAsTouched()代码，则在您调用之前不会检查更改markForCheck()。

这是一个工作示例：https ://stackblitz.com/edit/angular-6-reactive-form-validation-touched-sjhijt

于 2020-05-07T14:09:08.613 回答
0

我不知道您是否正在寻找直接使用新 FormGroup 创建 ReactiveForm 的新方法。对不起，如果我不明白你的问题。例如

//before
this.myForm=this.formBuilder({
   control1:''
   })
//after
this.myForm=new FormGroup({
   control1:new FormControl(''),
},{ updateOn: 'blur' })
于 2019-05-04T09:08:40.520 回答